[javascript]textarea 글자수 제한에서 substring() 문제

textarea 에서 글자수를 제한할 일이 생겼다.

그런데 해당 내용이 submit() 할 때 체크하는 것이 아니라, 사용자의 입력에 따라 계속 체크되어야 한다.

그래서..

<textarea id="comment" name="comment" onKeyUp="checkLength(this);" onKeyDown="checkLength(this);"></textarea>

로 onKeyUp 이벤트를 잡아본다. 사용자가 입력할 때마다 체크하겠다는 얘기다.

그리고 자바스크립트로

function checkLength(comment) {
    if (comment.value.length > 10 ) {
        comment.value = comment.value.substring(0, 10);
        return false;
    }
}

10자까지 입력받고, 11자를 입력하면 마지막 글자가 삭제되면서 10자로 고정 시켜 함수이다.

이렇게 만들었더니.. 영문과 숫자, 특수문자에서는 잘 동작한다.

그랬는데, 문제가 있다.

한글에서 11번째 글자를 입력하면 1~10번째 글자는 모두 지워지고, 11번째 글자가 남게된다.

내가 원하는 건 1~10번째 글자가 남고, 11번째 글자가 지워지는 것인데 말이다.

그러던 중 포커스 문제라는 것을 알게 되었다.

그래서 아래와 같이 포커스 노가다를 해주면 해결된다.

function checkLength(comment) {
    if (comment.value.length > 10 ) {
        comment.blur();
        comment.value = comment.value.substring(0, 10);
        comment.focus();
        return false;
    }
}

 

 

*) substring 하기 전에 alert() 을 띄우면 저렇게 해줄 필요없다. ex) alert('10자 이내로 입력');