textarea 글자수(byte) 제한

프로젝트나 프로그램을 하다보면 (특히 SMS 발송, MMS 발송 기능에서는 글자수나 Byte수를 측정하여 발송 단가를 따로 계산 합니다.) textarea에 길이 제한을 하는 경우가 많습니다.

이럴때는 어떻게 해야 할까요?
이런 단순한 기능들에 대한 고민을 하시는 분들을 위해서 오늘은 textarea 글자수(byte) 제한에 대해서 알아보겠습니다.

먼저 소스 form안에 textarea 컨트롤을 하기와 같이 넣습니다.
<textarea rows="10" cols="16" name="contents" onKeyUp="javascript:fnChkByte(this,'80')">선착순으로 무료증정합니다.</textarea>
<span id="byteInfo">0</span> 80bytes
그리고 밑에 자바스크립트 함수를 넣으면 끝!!!
// Byte 수 체크 제한
function fnChkByte(obj, maxByte)
{
    var str = obj.value;
    var str_len = str.length;


    var rbyte = 0;
    var rlen = 0;
    var one_char = "";
    var str2 = "";


    for(var i=0; i<str_len; i++)
    {
        one_char = str.charAt(i);
        if(escape(one_char).length > 4)
        {
            rbyte += 2;                                         //한글2Byte
        }
        else
        {
            rbyte++;                                            //영문 등 나머지 1Byte
        }


        if(rbyte <= maxByte)
        {
            rlen = i+1;                                          //return할 문자열 갯수
        }
     }


     if(rbyte > maxByte)
     {
  // alert("한글 "+(maxByte/2)+"자 / 영문 "+maxByte+"자를 초과 입력할 수 없습니다.");
  alert("메세지는 최대 " + maxByte + "byte를 초과할 수 없습니다.")
  str2 = str.substr(0,rlen);                                  //문자열 자르기
  obj.value = str2;
  fnChkByte(obj, maxByte);
     }
     else
     {
        document.getElementById('byteInfo').innerText = rbyte;
     }
}
어떠신가요? 엄청나게 쉽줘...ㅎ

위에서 글자수는 length를 의미하고 그걸 byte로 계산하는 방법이었습니다. 기본적 글자수만 제어한다면  <input type="text" maxlength="40"> 요런식으로 maxlength를 사용하여 제어하는 방법이 있지만 textarea에서는 maxlength가 제공되지 않기 때문에 따로 스크립트를 사용해야 합니다.
아래는 jquery를 사용한 간단한 예제 입니다. (요즘 jquery를 많이 사용하지요...ㅎ)


<form id="formByte" name="formByte">
<textarea id="byteInfo" name="byteInfo">
</textarea>
</form>


<script type="text/javascript">
$(document).ready(function() {


    $('#byteInfo').on('keyup', function() {


        if($(this).val().length > 80) {
            $(this).val($(this).val().substring(0, 80));
        }


    });


});
</script>
단순히 글자수를 제어하기에는 위에 스크립트만으로 해결되지만 sms나 mms발송시의 제한은 글자수가 아닌 Byte를 비교하기 때문에 첫번째 방법을 많이 사용합니다.

이상으로 textarea 글자수(byte) 제한에 대해서 알아보았습니다.
오늘도 행복한 하루 되시길 기원합니다.
끝까지 읽어주신 모든분들께 감사드립니다.