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

댓글을 달아 주세요

  1. kellokim 2015.11.20 16:00  댓글주소  수정/삭제  댓글쓰기

    최신버젼 크롬에서는 마지막글자가 포함되지않고 잘리네요. 버젼업됐나봅니다.

  2. 전술Creator 2019.10.16 16:03  댓글주소  수정/삭제  댓글쓰기

    잘보고갑니다~

  3. ㅠㅠ 2021.09.15 15:09  댓글주소  수정/삭제  댓글쓰기

    DB에 따라서도 제한을 걸어줘야하네요ㅠ
    maxlength 30자 제한 했더니 알파벳도 30자 한글도 30자 DB에는 30 / 60으로 들어가는 참사가...