INPUT, TEXTAREA 입력 시 글자 byte 확인 후 자르기

입력 창에 Bytes 제한을 두고 사용자가 입력 시 현재 입력된 글자의 Bytes를 보여달라는 요청이 왔다.

 

보통 이런 기능은 사이트 내 댓글이나 문자 발송 시 요청되는데 문제는 숫자, 영어는 1byte 이기 때문에 상관이 없으나 

한글의 경우 2bytes 이기 때문에 문자 타입 체크를 해야 한다.

 

Jquery 를 사용하고 있어 script 쪽에 Jquery를 이용해 추가했다.

 

View 영역에 HTML 소스 추가

<div>
  <textarea id='text-box' rows='5' cols='40'></textarea>
  <span><span id='text-length'>0</span>/80</span>
</div>

 

View 영역 Jqeury Script 소스 추가

$("#text-box").bind({
  "keyup": function () {
    var dom = $(this), textDom = $('#text-length'), str = dom.val(), 
        _byte = 0, strLength = 0, charStr = '', cutStr = '', maxLength = 80;
    if (str.length <= 0) {
      return;
    }
    for (var i = 0; i < str.length; i++) {
      charStr = str.charAt(i);
      if (escape(charStr).length > 4) {
        _byte += 2;
      } else {
        _byte++;
      }
      if (_byte <= maxlength) {
        strLength = i + 1;
      }
    }
    textDom.text(_byte);
    if (_byte > maxLength) {
      cutStr = dom.val().substr(str, strLength);
      dom.val(cutStr);
      textDom.text(maxLength);
      return;
    } else {
      textDom.text(_byte);
    }
  }
});