javascript 실시간 글자수 체크

글자수 체크는 보통 서브밋하면 체크하는 형식이라서 불필요하게 지저분해 보였는데

구글링하다가 우연히 발견한 방법!

String.prototype에 bytes라는 function을 추가하여 코드가 훨씬 깔끔해보였다.

나만 그런가 (..)

var limit_length = 80;
var msg_length = 0;

//String에 bytes() 함수 만들기
String.prototype.bytes = function() {
 var msg = this;
 var cnt = 0;

//한글이면 2, 아니면 1 count 증가
 for( var i=0; i< msg.length; i++) 
  cnt += (msg.charCodeAt(i) > 128 ) ? 2 : 1;  
 return cnt;
}

//textarea에서 키를 입력할 때마다 동작
$("#str").keyup(function( e ){
 msg_length = $(this).val().bytes(); 

 if( msg_length <= limit_length ) {     
  $("#type_num").css("color", "#646464");    
  $("#type_num").html( msg_length );  
 }
 else {
  $("#type_num").css("color", "#E55451");   
  $("#type_num").html( msg_length );   
 }
});

//추후 서브밋할때 alert
function do_submit(){
 if( msg_length > limit_length ){
  alert( '입력할 수 있는 최대 길이는 '+limit_length+' bytes입니다.' );
  return;
 }
 ....
 }
}

0 / 80bytes

입력했을 때 바로바로 alert 띄우기보다는 길이 값이 달라졌다는 것에 대해서 글자색을 달리하거나 문자열을 추가함으로써 알려주는 것이 더 나은 것 같다는 생각...