티스토리 뷰

고객의 요건은 간단했다.

웹에서 문자메시지를 보내게 해달라는 거였다.

구현은 문제 될거 없었지만 한글 포함해서 80byte만 입력해야 한다는 것이다.

textarea의 경우에 문자메시지를 입력받을 경우를 가정했을때...

onkeypress 이벤트를 사용하면 한글이 입력 될때에는 반응이 없기 때문에 안된다.

그래서 onkeydown, onkeyup 이벤트를 사용한다.

뭐 나머지는 다음과 같이 처리한다.

 

event.keyCode = 0

event.returnValue = false;

 

예제>>
 /**
   * SMS전송문자의 길이가 80Byte가 초과하는지 검사한다.
  */
 function msgByteCount(obj) {
  if(obj.value) {
   var bytesLength = 0;
   var txtVal = obj.value;
   var charCode = -1;
   for(var idx=0, limit=txtVal.length; idx<limit; idx++) {
    charCode = txtVal.charCodeAt(idx);
    if (charCode > 128)        {
     bytesLength += 2;
    }
    else {
     bytesLength++;
    }

   } // end of for

   // 마지막 입력 char
   var lastCharLength = 0;
   if(event.keyCode > 128) {
    lastCharLength = 2;
   }
   else if(!isContainValue(event.keyCode)){
    lastCharLength = 1;
   }

   bytesLength += lastCharLength;
   if(bytesLength > 80 && !isContainValue(event.keyCode)) {
    bytesLength = bytesLength - lastCharLength;
    if (event.preventDefault) {
     event.preventDefault();
     return false;
    }
    else {
     // event canvel
     event.keyCode = 0;
     event.returnValue = false;
     // TODO : 전송버튼 포커스 이동
   }

  }

   // byte show
   document.getElementById("byte_show").innerHTML = "("+ bytesLength +"/80)";
  }
 }

[출처] 한글입력 Byte계산|작성자 그림자