[JavaScript] textarea 글자수(byte) 제한

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

 

먼저 소스 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;
     }
}

 

Reference : nightsunlove.blogspot.com/2018/08/textarea-byte.html