[자바스크립트] TEXTAREA MAXLENGTH 구현 _ 한글, 영/숫자 최대 글자수 제어

TEXTAREA의 MAXLENGTH를 스크립트로 구현을 해봤습니다.

지식인에 있던 소스를 참고하여 제 입 맛(?)에 맞게 수정을 했습니다.

Colored By Color Scripter™

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

// TEXTAREA 최대값 체크     function fn_TextAreaInputLimit() {         var tempText = $("textarea[name='reportCn']");         var tempChar = "";                                        // TextArea의 문자를 한글자씩 담는다         var tempChar2 = "";                                        // 절삭된 문자들을 담기 위한 변수         var countChar = 0;                                        // 한글자씩 담긴 문자를 카운트 한다         var tempHangul = 0;                                        // 한글을 카운트 한다         var maxSize = 250;                                        // 최대값                  // 글자수 바이트 체크를 위한 반복         for(var i = 0 ; i < tempText.val().length; i++) {             tempChar = tempText.val().charAt(i);               // 한글일 경우 2 추가, 영문일 경우 1 추가             if(escape(tempChar).length > 4) {                 countChar += 2;                 tempHangul++;             } else {                 countChar++;             }         }                  // 카운트된 문자수가 MAX 값을 초과하게 되면 절삭 수치까지만 출력을 한다.(한글 입력 체크)         // 내용에 한글이 입력되어 있는 경우 한글에 해당하는 카운트 만큼을 전체 카운트에서 뺀 숫자가 maxSize보다 크면 수행         if((countChar-tempHangul) > maxSize) {             alert("최대 글자수를 초과하였습니다.");                          tempChar2 = tempText.val().substr(0, maxSize-1);             tempText.val(tempChar2);         }     }

기존 소스에서 문제가 substr으로 쪼개다 보니 countChar의 수보다 maxsize가 작다고 했을 때에 

중간에 한글이 있다면 한글SIZE와 영/숫자 SIZE가 다른 관계로 

제대로 동작이 안되는 오류가 있었습니다.

예시 1) maxsize가 100일 경우 한글 50개 숫자 50개를 입력할 경우 이론대로라면 

           한글 50개만 입력이 되고 나머지는 입력이 되지 않아야 하는데,  숫자 50개까지 입력을 해야 

           100이 되는 문제가 발생했습니다.

           이 경우에 countChar에서 한글을 2로 카운트 하기 때문에 한글 50개 이후부터는 계속 경고 

           메시지는 출력이 되지만, 정상적으로 절삭이 되지 않았습니다.

그래서, 저는 별도의 한글 카운트를 추가하여 전체 카운트(영/숫자 1, 한글 2)로 되어 있는 카운트에서 한글 카운트(한글 1)를 뺀 숫자가 maxsize보다 클 경우에 정상적으로 절삭 기능을 동작하게 수정을 해봤습니다.

많은 테스트를 수행하지는 못했지만, 참고해보시면 좋을 것 같습니다.

사용은

Colored By Color Scripter™

1	onkeyup="javascript:fn_TextAreaInputLimit();"

onkeyup이벤트로 사용하였습니다.