<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 웹 기술대행 서비스는 업폴더 :: www.upfolder.com </title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<meta name="keywords" content="완벽 자바스크립트 및 css를 이용한 숫자만 입력받기">
<meta name="description" content="완벽 자바스크립트 및 css를 이용한 숫자만 입력받기">
<meta name="author" content="www.upfolder.com">
</head>
<body>
<script language="javascript">
<!--
/*
// Function : onOnlyNumber
// Description : 숫자만 입력받도록
// Param : obj - text
// Return : true or false
*/
function onOnlyNumber(obj)
{
for (var i = 0; i < obj.value.length ; i++){
chr = obj.value.substr(i,1);
chr = escape(chr);
key_eg = chr.charAt(1);
if (key_eg == ’u’){
key_num = chr.substr(i,(chr.length-1));
if((key_num < "AC00") || (key_num > "D7A3")) {
event.returnValue = false;
}
}
}
if (event.keyCode >= 48 && event.keyCode <= 57) {
} else {
event.returnValue = false;
}
}
// EOF
//-->
</script>
<form name=upfolder>
<b>숫자만 입력받기 (onKeyPress) : </b><br>
<input type=text name=field1 size=30 onKeyPress="onOnlyNumber(this);">
<br>
<b>숫자만 입력받기 (onKeyDown) : </b><br>
<input type=text name=field2 size=30 onKeyDown="onOnlyNumber(this);">
</form>
<pre>
위와 같이 하면 한글입력을 막을 수 있습니다. 하지만 한가지 문제점이 있습니다.
위의 코드를 만들어 놓고 onKeyPress를 적용하면 한글을 쓰고 페이지 공백으로 포커스를 이동할 경우
마지막에 입력했던 한글이 그대로 나오게 됩니다.
* onKeyPress 대신 onKeyDown 사용하면 한글 키 자체를 입력하지 못함.
<br>
위에서 기술한 것보다 개량된 코드는 위 코드에서 style에 IME-MODE를 적용하여 함께 사용하는 것입니다.
이렇게 IME-MODE로 한글자체를 막아버리고 ASCII만을 허용하게 설정하는 것입니다.
</pre>
<br>
<hr size=1>
<pre>
ImeMode 속성은 IME(Input Method Editor)를 특정 모드로 전환하기 위해 폼과 컨트롤에서 사용합니다.
IME는 일반 키보드로 인코딩할 수 있는 것보다 더 많은 문자를 포함하고 있으므로 중국어, 일본어 및 한국어 스크립트를 작성하는 데 필수적인 구성 요소입니다.
예를 들어, 특정 입력란에 ASCII 문자만 사용하게 할 수도 있습니다.
이런 경우에 특정 입력란에 대해 ImeMode 속성을 Disable로 설정하면 사용자는 해당 입력란에 ASCII 문자만 입력할 수 있습니다.
사용방법 (Syntax)
HTML { ime-mode : sMode }
Scripting object.style.imeMode [ = sMode ]
IME-MODE 에 설정가능한 값 (sMode 는 스트링형으로 아래 서술한 값중 하나를 설정할 수 있습니다.)
1. auto : Default. IME is not affected. This is the same as not specifying the ime-mode attribute.
2. active : All characters are entered through the IME. Users can still deactivate the IME.
3. inactive : All characters are entered without IME. Users can still activate the IME.
4. disabled : IME is completely disabled. Users cannot activate the IME if the control has focus.
테스트할 때는 키보드가 한글모드인지 영문모드인지 확인해 보고 모드를 바꾸어 가면서 테스트해 보세요.
</pre>
<form name=upfolder>
IME-MODE:auto/기본값으로 설정하지 않은 것과 같음 : <br>
<input type=text name=field1 size=30 style="IME-MODE:auto;">
<br>
IME-MODE:disabled/오로지 영문만 : <br>
<input type=text name=field1 size=30 style="IME-MODE:disabled;">
<br>
IME-MODE:inactive/기본영문, 한글전환 가능 : <br>
<input type=text name=field1 size=30 style="IME-MODE:inactive;">
<br>
IME-MODE:active/기본한글, 영문전환 가능 : <br>
<input type=text name=field1 size=30 style="IME-MODE:active;">
<br>
<hr size=1>
<br>
<b>숫자만 입력받기</b> ( style="IME-MODE:disabled;" onKeyDown=onOnlyNumber(this) ): <br>
<input type=text name=field1 size=30 style="IME-MODE:disabled;" onKeyDown="onOnlyNumber(this);">
</form>
</body>
</html>