textarea 글자수 제한에서 substring() 문제의 연장선이다.
파이어폭스에서 알려진 버그로 한글 입력 시 onKeyDown, onKeyUp 이벤트를 인식하지 못하는 문제가 있다.
그런게 onKeyPress를 이용하니 IE에서 인식을 못하고, 파이어폭스에서는 인식을 한다.
그래서 분기를 시켜보았다.
function isKeyPress( e ) {
document.getElementById(‘test’).innerHTML = document.getElementById(‘text’).value.length;
}
function setup(event) {
var evtObject = document.frm.text;
if(evtObject.addEventListener) { // for firefox
evtObject.addEventListener(“keypress”, isKeyPress, false);
} else if(evtObject.attachEvent) { // for ie
evtObject.attachEvent(“onkeyup”, isKeyPress);
}
}
window.onload=setup;
<textarea id=”text” name=”text”></textarea>
<div id=”test”></div>
키보드 입력을 받을 때마다 div 영역에 글자수를 프린트해주는 로직이다.
파이어폭스에서 사용하는 addEventListener를 확인해보고 onKeyPress 이벤트 핸들러를 생성하고,
IE에서는 addEventListener를 대체하는 attachEvent 라는 것을 이용해서 onKeyUp 이벤트 핸들러를 생성한다.
그래서 파폭이면 onKeyPress, IE면 onKeyUp 핸들러를 이용하게 된다.
단, 문제점!!
직접 테스트를 해보니, onKeyPress 핸들러는 한동작 늦게 반응한다.
즉, aa 라고 두 글자를 치면 갯수를 1개로 인식한다.
도움받은 사이트 : http://blog.naver.com/metalorion?Redirect=Log&logNo=50042192040