input type="text" 의 입력가능한 문자길이 제한은 보통 maxlength attrtibute를 이용한다.


 <input type="text" maxlength="5" />




이 때 maxlength를 넘어서는 문자열이 입력되면 alert으로 경고창을 출력하고자 한다면 아래처럼 처리할 수 있음.


<script>
$(document).ready(function(){
    $('#input_text').keyup(function(){
        if ($(this).val().length > $(this).attr('maxlength')) {
            alert('제한길이 초과');
            $(this).val($(this).val().substr(0, $(this).attr('maxlength')));
        }
    });
});
</script>

<input type="text" maxlength="5" id="input_text" />





근데 이게 한글 입력일 경우 브라우저마다 다르게 동작함.


chrome의 경우엔 '하하하하하' 라고 5자 입력한 후 '하'를 한 번 더 입력하고하면,

먼저 '하하하하핳' 까지 입력되고 'ㅏ'를 한 번 더 입력하면 '하하하하하하' 라고 6자가 나온 다음 keyup 이벤트 핸들러에 걸려서 alert() 이 뜨는데,

IE의 경우엔 '하하하하핳'까지 입력 된 후 'ㅏ'를 한 번 더 입력해도 '하하하하하'만 남고 alert은 안 뜸.


그러므로 chrome에선 maxlength가 5라면 한글이 6자까지 들어가게 되므로 필히 keyup 에서 substr을 해줘야 한다.


IE는 maxlength를 먼저 적용해서 글자를 잘라낸 후 keyup을 발생시키는 모양이다.



Posted by bloodguy

댓글을 달아 주세요