<div class="cmtRemaining"><span class="cmtCnt">18</span>/<span class="maxCmtCnt">300</span>byte(한글 150자, 영문 300자)
<dl>
<dt class="comment-name"><strong>test</strong></dt>
<dd class="comment-date"><textarea style="height: 60px" class="comCo" name="comCo" placeholder="내용을 입력하세요."></textarea></dd>
<dd class="comment-reply"><input type="button" class="replyBtn btn btn-input btn-black btn-rect" value="의견입력"></dd>
</dl>
</div>
$('.cmtRemaining').each(function () {
// count 정보 및 count 정보와 관련된 textarea/input 요소를 찾아내서 변수에 저장한다.
//var $maxcount = $('.maxCmtCnt', this);
//var $count = $('.cmtCnt', this);
//var $input = $('.comCo', this);
var $maxcount = $(this).find('.maxCmtCnt');
var $count = $(this).find('.cmtCnt');
var $input = $(this).find('.comCo');
// .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.
var maximumByte = $maxcount.text() * 1;
// update 함수는 keyup, paste, input 이벤트에서 호출한다.
var update = function () {
var before = $count.text() * 1;
var str_len = $input.val().length;
var cbyte = 0;
var li_len = 0;
for (i = 0; i < str_len; i++) {
var ls_one_char = $input.val().charAt(i);
if (escape(ls_one_char).length > 4) {
cbyte += 2; //한글이면 2를 더한다
} else {
cbyte++; //한글아니면 1을 다한다
}
if (cbyte <= maximumByte) {
li_len = i + 1;
}
}
// 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
if (parseInt(cbyte) > parseInt(maximumByte)) {
alert('허용된 글자수가 초과되었습니다.\r\n\n초과된 부분은 자동으로 삭제됩니다.');
var str = $input.val();
var str2 = $input.val().substr(0, li_len);
$input.val(str2);
var cbyte = 0;
for (i = 0; i < $input.val().length; i++) {
var ls_one_char = $input.val().charAt(i);
if (escape(ls_one_char).length > 4) {
cbyte += 2; //한글이면 2를 더한다
} else {
cbyte++; //한글아니면 1을 다한다
}
}
}
$count.text(cbyte);
};
// input, keyup, paste 이벤트와 update 함수를 바인드한다
$input.bind('input keyup keydown paste change', function () {
setTimeout(update, 0)
});
update();
});
응용
$(document).on('keyup','.comCo',function(){
var $maxcount = $(this).parents('.cmtRemaining').find('.maxCmtCnt');
var $count = $(this).parents('.cmtRemaining').find('.cmtCnt');
var $input = $(this);
// .text()가 문자열을 반환하기에 이 문자를 숫자로 만들기 위해 1을 곱한다.
var maximumByte = $maxcount.text() * 1;
// update 함수는 keyup, paste, input 이벤트에서 호출한다.
var update = function () {
var before = $count.text() * 1;
var str_len = $input.val().length;
var cbyte = 0;
var li_len = 0;
for (i = 0; i < str_len; i++) {
var ls_one_char = $input.val().charAt(i);
if (escape(ls_one_char).length > 4) {
cbyte += 2; //한글이면 2를 더한다
} else {
cbyte++; //한글아니면 1을 다한다
}
if (cbyte <= maximumByte) {
li_len = i + 1;
}
}
// 사용자가 입력한 값이 제한 값을 초과하는지를 검사한다.
if (parseInt(cbyte) > parseInt(maximumByte)) {
alert('허용된 글자수가 초과되었습니다.\r\n\n초과된 부분은 자동으로 삭제됩니다.');
var str = $input.val();
var str2 = $input.val().substr(0, li_len);
$input.val(str2);
var cbyte = 0;
for (i = 0; i < $input.val().length; i++) {
var ls_one_char = $input.val().charAt(i);
if (escape(ls_one_char).length > 4) {
cbyte += 2; //한글이면 2를 더한다
} else {
cbyte++; //한글아니면 1을 다한다
}
}
}
$count.text(cbyte);
};
// input, keyup, paste 이벤트와 update 함수를 바인드한다
$input.bind('input keyup keydown paste change', function () {
setTimeout(update, 0)
});
update();
});
정리하기