HTML에서 input박스에 글자 입력시 Byte체크

혼자서 한참을 삽질하다가,결국 어느 N포털에서 글쓰는 부분의 소스를 보고,

이렇게 가져다 썼다.보니까 나도 비슷하게 했지만 그 unicode구분하는것을 잘못했었다.

 바로 적용하니까 아주 잘 되는군.그대로 사용하게되었다.그러나 좀 죄책감이 든다.남이 만든 소스를 이렇게 가져다 써서...

// 이 function이 N포털에서 사용하는 function이다.

// 이 charCodeAt()과 charAt()의 차이를 알게되었다.

function fnCut(str,lengths) // str은 inputbox에 입력된 문자열이고,lengths는 제한할 문자수 이다.

{

      var len = 0;

      var newStr = '';

  

      for (var i=0;i<str.length; i++) 

      {

        var n = str.charCodeAt(i); // charCodeAt : String개체에서 지정한 인덱스에 있는 문자의 unicode값을 나타내는 수를 리턴한다.

        // 값의 범위는 0과 65535사이이여 첫 128 unicode값은 ascii문자set과 일치한다.지정한 인덱스에 문자가 없다면 NaN을 리턴한다.

        

       var nv = str.charAt(i); // charAt : string 개체로부터 지정한 위치에 있는 문자를 꺼낸다.

        

        if ((n>= 0)&&(n<256)) len ++; // ASCII 문자코드 set.

        else len += 2; // 한글이면 2byte로 계산한다.

        

        if (len>lengths) break; // 제한 문자수를 넘길경우.

        else newStr = newStr + nv;

      }

      return newStr;

}

----------------------------------------------------------------------------------------------------

// 위에 만든 function을 가져다 쓴 최종 function

function displayBytes( sz, id )  // sz 는 String Size로서 제한할 문자 byte수,id는 해당 input박스의 id이다.

{

 var obj = document.getElementById( id );

 var e_index = 0;

 if (obj.value.bytes() > sz) // 제한량을 넘겼을시.

 { 

  if (event.keyCode != '8') //백스페이스는 지우기작업시 바이트 체크하지 않기 위해서

  {

 var chkdgsoweg =  ( sz / 2 ); // 한글은 2byte,영문은 1byte이다.

 alert('한글은 ' + chkdgsoweg + '자 , 영문은 ' + sz + '자 까지 입력이 가능합니다.');

  }

  //  sz자 까지 만든다.

  obj.value = fnCut(obj.value , sz);

 }

}

---------------------------------------------------------------------------------------------------------------

// 이렇게 구현한 펑션을 input박스에 이렇게 구현했다.

// onkeyup은 키보드에서 키를 눌렀다 놓았을때 발생하는 이벤트 핸들러.

<input type="text" class="" value="" size="50" onkeyup='javascript:displayBytes(100,"title");'

name="title">

[출처] HTML에서 input박스에 글자 입력시 Byte체크.|작성자 No고기No밥