Input 태그에 관해서 질문이 있어서 글을 올립니다. Input태그를 이용해서 작업을 하고 있는데요. Input 태그에서 키가 눌린 순간에 Input태그에 입력된 값을 알아내야하는데 이 부분이 firefox와 ie가 다르더군요.
차이점 1.
영문은 상관이 없는데 한글을 입력할 때 ie에서는 입력된 한글에 대해서 바로바로 리턴을 해주는 반면에 firefox는 포커스를 잃어버리거나 스페이스를 입력할 때 한글 값을 얻어올 수 있더군요.
차이점 2.
ie에서도 영문의 경우 키를 눌렀을 때 입력된 키에 대해서 영문인 경우 input.value에 포함이 안되고 한글인 경우는 input.value에 포함시켜서 내보내구요.
혹시 키를 입력했을 때 입력된 값을 얻어오는 좋은 방법이 없을까요?
실험해본 소스코드는 다음과 같습니다.
Code: Select all
<html>
<head>
<title> Input Test </title>
<script>
var keydown_dump, keypress_dump
function onLoad(){
var sample = document.getElementById('sample')
var input = document.createElement('input')
input.type = 'text'
sample.appendChild(input)
input.keypress_dump = document.getElementById('dump_div1')
input.keydown_dump =document.getElementById('dump_div2')
keydown_dump = input.keydown_dump
keypress_dump = input.keypress_dump
addEvent(input, 'keypress', onKeyPress)
addEvent(input, 'keydown', onKeyDown)
}
function onKeyPress(event){
var keyCode = (window.event) ? window.event.keyCode : event.keyCode
var dump = (this.keypress_dump) ? this.keypress_dump : keypress_dump
var txt = (window.event) ? window.event.srcElement.value : this.value
dump.innerHTML = keyCode + ' : ' + txt
}
function onKeyDown(event){
var keyCode = (window.event) ? window.event.keyCode : event.keyCode
var dump = (this.keydown_dump) ? this.keydown_dump : keydown_dump
var txt = (window.event) ? window.event.srcElement.value : this.value
dump.innerHTML = keyCode + ' : ' + txt
}
function addEvent(element, eventName, handler) {
if(element.attachEvent)
element.attachEvent("on" + eventName, handler);
else
element.addEventListener(eventName, handler, false);
}
</script>
</head>
<body>
<div></div>
<br>
keypress dump: <div></div>
<br>
keydown dump: <div></div>
</body>
</html>