jquery keyup 질문드립니다.
본문
안녕하세요.
textarea가
1 댓글
1 답글
2 답글
3 답글
이 있으면 1 댓글과 1 답글은 keyup이 잘 작동하는데
2 답글, 3 답글은 keyup이 작동하지 않습니다.
alert('a') 까지도 안오네요 1댓글, 1답글만 작동하네요.
원인을 알수 있을까요?
감사합니다.
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="u_cbox_write_wrap">
1 댓글
<textarea title="댓글" id="cbox_module__write_textarea" class="u_cbox_text" rows="3" cols="30" data-log="RPC.input"></textarea>
<span>현재 입력한 글자수</span><strong class="u_cbox_count_num">0</strong>
</div>
<div id="u_cbox_write_wrap_reply">
1 답글
<textarea title="답글" id="cbox_module__reply_textarea" class="u_cbox_text" rows="3" cols="30" data-log="RPC.input"></textarea>
<span>현재 입력한 글자수</span><strong class="u_cbox_count_num">0</strong>
</div>
<div id="u_cbox_write_wrap_reply">
2 답글
<textarea title="답글" id="cbox_module__reply_textarea" class="u_cbox_text" rows="3" cols="30" data-log="RPC.input"></textarea>
<span>현재 입력한 글자수</span><strong class="u_cbox_count_num">0</strong>
</div>
<div id="u_cbox_write_wrap_reply">
3 답글
<textarea title="답글" id="cbox_module__reply_textarea" class="u_cbox_text" rows="3" cols="30" data-log="RPC.input"></textarea>
<span>현재 입력한 글자수</span><strong class="u_cbox_count_num">0</strong>
</div>
<script>
// 댓글 글자수 제한
var limit_count = 5;
$('#cbox_module__write_textarea').on('keyup', function() {
if($(this).val().length > limit_count) {
$(this).val($(this).val().substring(0, limit_count));
$('#u_cbox_write_wrap .u_cbox_count_num').text($(this).val().length);
alert(limit_count + '자리 이상 입력하실수 없습니다.');
return false;
} else {
$('#u_cbox_write_wrap .u_cbox_count_num').text($(this).val().length);
}
});
// 답글 글자수 제한
$('#cbox_module__reply_textarea').on('keyup', function() {
alert('a');
if($(this).val().length > limit_count) {
$(this).val($(this).val().substring(0, limit_count));
$(this).find('#u_cbox_write_wrap_reply .u_cbox_count_num').text($(this).find('.u_cbox_count_num').val().length);
alert(limit_count + '자리 이상 입력하실수 없습니다.');
return false;
} else {
$(this).find('#u_cbox_write_wrap_reply .u_cbox_count_num').text($(this).find('.u_cbox_count_num').val().length);
}
});
</script>
답변 1
div 의 id 값이 동일한게 여러개라 못찾아서 그런거같습니다.
아래 처럼 수정해봤어요 원하시는게 맞을가요? ㅎ
id 값들은 필요가 없어보임니다
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="u_cbox_write_wrap" class="u_cbox_wrap">
1 댓글
<textarea title="댓글" id="cbox_module__write_textarea" class="u_cbox_text" rows="3" cols="30" data-log="RPC.input"></textarea>
<span>현재 입력한 글자수</span><strong class="u_cbox_count_num">0</strong>
</div>
<div id="u_cbox_write_wrap_reply" class="u_cbox_wrap">
1 답글
<textarea title="답글" id="cbox_module__reply_textarea" class="u_cbox_text" rows="3" cols="30" data-log="RPC.input"></textarea>
<span>현재 입력한 글자수</span><strong class="u_cbox_count_num">0</strong>
</div>
<div id="u_cbox_write_wrap_reply" class="u_cbox_wrap">
2 답글
<textarea title="답글" id="cbox_module__reply_textarea" class="u_cbox_text" rows="3" cols="30" data-log="RPC.input"></textarea>
<span>현재 입력한 글자수</span><strong class="u_cbox_count_num">0</strong>
</div>
<div id="u_cbox_write_wrap_reply" class="u_cbox_wrap">
3 답글
<textarea title="답글" id="cbox_module__reply_textarea" class="u_cbox_text" rows="3" cols="30" data-log="RPC.input"></textarea>
<span>현재 입력한 글자수</span><strong class="u_cbox_count_num">0</strong>
</div>
<script>
// 댓글 글자수 제한
var limit_count = 5;
$('.u_cbox_text').on('keyup', function() {
if($(this).val().length > limit_count) {
$(this).val($(this).val().substring(0, limit_count));
$(this).closest('.u_cbox_wrap').find('.u_cbox_count_num').text($(this).val().length);
alert(limit_count + '자리 이상 입력하실수 없습니다.');
return false;
} else {
$(this).closest('.u_cbox_wrap').find('.u_cbox_count_num').text($(this).val().length);
}
});
</script>
아래처럼 수정해도 될듯해보임
// 댓글 글자수 제한
var limit_count = 5;
$('.u_cbox_text').on('keyup', function() {
var $this = $(this); // 현재 textarea 요소를 jQuery 객체로 저장
// 입력값을 최대 글자 수까지 자르고 textarea에 설정
if ($this.val().length > limit_count) {
$this.val($this.val().substring(0, limit_count));
alert(limit_count + '자리 이상 입력하실 수 없습니다.');
}
// u_cbox_wrap 클래스를 가진 부모 요소에서 u_cbox_count_num 클래스를 가진 요소를 찾아 업데이트
$this.closest('.u_cbox_wrap').find('.u_cbox_count_num').text($this.val().length);
});
감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
