Mozilla 한국 커뮤니티

안녕하세요 ^^
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>

Mozilla 한국 커뮤니티

Input 태그에 입력된 값에 대한 질문입니다

Input 태그에 입력된 값에 대한 질문입니다