input 박스 글자수 제한

 

======================= input 설정 ======================

아이디: <input type="text" name="id" value="" "checkLength(this,10)"/>

 위와 같이 설정하면 키가 눌러졌다 올라갔을때 checkLength 스크립트 함수를 실행한다.

 ======================= javascript 설정 ==================

function checkLength(objname, maxlength) {
  var objstr = objname.value; // 입력된 문자열을 담을 변수
  var objstrlen = objstr.length; // 전체길이

  // 변수초기화
  var maxlen = maxlength; // 제한할 글자수 최대크기
  var i = 0; // for문에 사용
  var bytesize = 0; // 바이트크기
  var strlen = 0; // 입력된 문자열의 크기
  var onechar = ""; // char단위로 추출시 필요한 변수
  var objstr2 = ""; // 허용된 글자수까지만 포함한 최종문자열

  // 입력된 문자열의 총바이트수 구하기
  for (i = 0; i < objstrlen; i++) {
   // 한글자추출
   onechar = objstr.charAt(i);

   if (escape(onechar).length > 4) {
    bytesize += 2; // 한글이면 2를 더한다.
   } else {
    bytesize++; // 그밗의 경우는 1을 더한다.
   }

   if (bytesize <= maxlen) { // 전체 크기가 maxlen를 넘지않으면
    strlen = i + 1; // 1씩 증가
   }
  }

  // 총바이트수가 허용된 문자열의 최대값을 초과하면
  if (bytesize > maxlen) {
   alert(((objname.name.match("id"))?"아이디":"패스워드")+"에서 허용된 문자열의 최대값("+maxlen+")을 초과했습니다. \n초과된 내용은 자동으로 삭제 됩니다.");  // match를 이용해서 영어로된 name을 한글로 변환해서 출력한다.
   objstr2 = objstr.substr(0, strlen);
   objname.value = objstr2;
  }
  objname.focus();
 }

 

주석을 잘 살펴보면 어떻게 동작하는지 알수 있을 것이다. 

[출처] input태그 text타입의 입력 글자수 제한하기 (개발자로 살아남기) |작성자 스페셜원