Input의 MaxLength의 한글 문제..

TextInput에서 글자수 입력 제한을 받는 방법은 Input의 maxlength를 이용하는 방법이 있다.

<input id="title" placeholder="" type="text" maxlength="50">

위와 같은 방법으로 글자수 입력 제한을 둘수가 있는데..

실제로 사용해 보면 영문이나 숫자는 maxlength에 입력된 길이 대로 입력이 제한 되는것을 볼수 있지만..

한글은 그렇지 않은것을 볼수가 있다.

<input id="title" class="form-control" placeholder="" type="text" maxlength="50" onblur="inputLengthCheck(this);">

function inputLengthCheck(eventInput){

var inputText = $(eventInput).val();

var inputMaxLength = $(eventInput).prop("maxlength");

var j = 0;

var count = 0;

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

val = escape(inputText.charAt(i)).length; 

if(val == 6){

j++;

}

j++;

if(j <= inputMaxLength){

count++;

}

}

if(j > inputMaxLength){

$(eventInput).val(inputText.substr(0, count));

}

}

그래서 만든 코드..

한글일 경우 길이를 2를 더하고 그외의 문자일 경우 1을 더해서 실질적인 길이를 반환해준다.

onblur에 준 이유는 영문이나 숫자는 입력 될때마다 길이를 체크해 정해진 길이 이상으로 입력이 될때 바로바로 체크가 가능하지만..한글의 경우 입력 완료후 엔터를 치거나 스페이스바를 쳐야만 확인이 가능하다. 그래서 Input에서 포커스가 빠져 나갈때 길이 확인을 해 정해진 길이만큼만 놔두고 나머지를 잘라내는 방법을 사용했다.