IT_Programming/JavaScript

[스크랩] 폼 입력창에 한글과 영어를 제외한 숫자만 인식하는 방법

JJun ™ 2006. 4. 27. 00:03

전화번호나 핸드폰 번호를 입력받을때 반드시 숫자로만 받아야 하는데... 영문이나 한글이 입력되면 안되겠죠? 대부분의 분들은 영문을 막는 방법을 아실겁니다. keycode값으로 인식해서 숫자만 받아버리면 되죠...

<html>
<head>
  <script language="xxjavascript">
  function onlyNumber()
  {
     if((event.keyCode<48)||(event.keyCode>57))
         event.returnValue=false;    
  }
  </script>
</head>
<body>
<input type=“text“ name=“testInput“ xxonkeypress=“return onlyNumber()“>
</body>
</html>

 

위와 같은 경우는 한글을 막을 수는 없습니다. 그러나 또 막는 방법은 있죠. 아래와 같이 말이죠.

 

<html>
<head>
  <script language="xxxxjavascript">
  function onlyNumber()
  {
     if((event.keyCode<48)||(event.keyCode>57))
         event.returnValue=false;    
  }

  function HanCheck(element)
  {
   strvalue = document.getElementById(element).value;
   objstr = new String(strvalue)
   
   for ( i=0; i<objstr.length; i++)
   {
       oneChar = objstr.charAt(i);
    
       if ( escape(oneChar).substring(0,2) == “%u“)
          document.getElementById(element).value = "";
   }
   document.getElementById(element).focus();
  }
  </script>
</head>
<body>
<input type=“text“ name=“testInput“ id=“testInput“
xxxxonkeypress=“return onlyNumber()“
xxxxonkeyup=“return HanCheck('testInput')“>
</body>
</html>

 

위와 같이 해버리면 한글까지 막을 수 있습니다. 그런데 한가지 문제점이 있습니다. 위의 코드를 만들어놓고 한글을 쓰고 페이지 공백으로 포커스를 한번 옮겨보세요. 그러면 마지막에 입력했던 한글이 그대로 나오게 됩니다. 이것도 완벽한 코딩은 아니죠? 그럼 어떻게 하면 될까요? 가장 중요한건 한글자체를 막아버리게 하면 되는겁니다. 다시 말해서 ASCII만을 허용하는 거죠. 이것을 가능하게 하기 위해서 IME-Mode라는 것을 사용하게 되는데, 자세한 설명은 msdn이나 다른 사이트를
참고하시구요 간단한 설명만을 할께요. 아래의 설명은 msdn에서 가져온 겁니다

 

ImeMode 속성은 IME(Input Method Editor)를 특정 모드로 전환하기 위해 폼과 컨트롤에서 사용합니다. IME는 일반 키보드로 인코딩할 수 있는 것보다 더 많은 문자를 포함하고 있으므로 중국어, 일본어 및 한국어 스크립트를 작성하는 데 필수적인 구성 요소입니다. 예를 들어, 특정 입력란에 ASCII 문자만 사용하게 할 수도 있습니다. 이런 경우에 특정 입력란에 대해 ImeMode 속성을 Disable로 설정하면 사용자는 해당 입력란에 ASCII 문자만 입력할 수 있습니다.

Syntax

HTML { ime-mode : sMode }
Scripting object.style.imeMode [ = sMode ]

Possible Values

sMode

String that specifies or receives one of the following values.

 

auto Default. IME is not affected. This is the same as not specifying the ime-mode attribute.
active All characters are entered through the IME. Users can still deactivate the IME.
inactive All characters are entered without IME. Users can still activate the IME.
disabled IME is completely disabled. Users cannot activate the IME if the control has focus.

The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of auto. The Cascading Style Sheets (CSS) attribute is inherited.

Expressions can be used in place of the preceding value(s), as of Microsoft?? Internet Explorer 5. For more information, see About Dynamic Properties.

Remarks

An Input Method Editor (IME) allows users to enter and edit Chinese, Japanese, and Korean characters. The IME is an essential component for writing Chinese, Japanese, and Korean scripts. These writing systems have more characters than can be encoded for a regular keyboard. The IMEs for these languages use sequences of base characters that describe an individual character or group of characters to enter a larger set of characters. Base characters can be component letters from Hangul syllables, phonetic components for Japanese Kanji characters, or various combinations for Chinese characters.

To compose text with an IME, the user generally uses dictionary lookup and contextual analysis, especially in languages where homonyms are frequent, as in Japanese. A user typically starts by entering a few component characters, optionally selecting from various choices, and a confirmation command.

Input Method Editors have two principle states:

  • Inactive mode. The keyboard acts like a regular keyboard and input is limited to a small set of characters.
  • Active mode. The IME accepts component characters or processing commands.

HTML authors can provide users with some control by specifying an IME mode for a specific text entry. For example, if Japanese users enter information in a registration form, they might be required to enter their names in Kanji and Roman characters. By default, the users would have to make sure that the IME is inactive when entering their names in the Latin alphabet. The user would activate the IME to enter Kanji letters, then deactivate the IME to complete the form in the Latin alphabet. By controlling the IME mode, the HTML author prevents the user from having to activate and deactivate the IME.

Example

This example uses the ime-mode attribute.

<INPUT TYPE = text STYLE = "ime-mode:active" >

영문이라서 죄송합니다. ^^;
위의 부분에서 빨간색으로 된 부분을 주의깊게 봐 주세요. 기본값은 auto(default)이구요. 스타일에서 이부분을 disabled로 바꾸어 주기만 하면 한글자체가 먹지 않고 무조건 ASCII만 입력되게 됩니다. 그렇게 되면 무조건 한글은 막을 수 있는 거겠죠? 그러니깐 최종적으로 한글과 영문의 입력을 막고 숫자만을 인식하게 할려면 아래와 같이 하면 완벽하게 끝나는 거죠~

 

<html>
<head>
<STYLE>
INPUT {IME-MODE:disabled}
</STYLE>
  <script language="xxxxjavascript">
  function onlyNumber()
  {
     if((event.keyCode<48)||(event.keyCode>57))
         event.returnValue=false;    
  }

// 위의 스타일이 적용되면 아래의 HanCheck(element)는 필요가 없습니다.
// 왜냐하면 한글자체가 입력되지 않으니깐요... 그래서 주석문으로...
/*
  function HanCheck(element)
  {
   strvalue = document.getElementById(element).value;
   objstr = new String(strvalue)
   
   for ( i=0; i<objstr.length; i++)
   {
       oneChar = objstr.charAt(i);
    
       if ( escape(oneChar).substring(0,2) == “%u“)
          document.getElementById(element).value = "";
   }
   document.getElementById(element).focus();
  }
*/
  </script>
</head>
<body>
<input type=“text“ name=“testInput“ id=“testInput“ xxxxonkeypress=“return onlyNumber()“>
</body>
</html>

출처 : ASP.NET WITH C#
글쓴이 : 후다닥 원글보기
메모 :

'IT_Programming > JavaScript' 카테고리의 다른 글

[스크랩] 베너랜덤하게나타내기  (0) 2006.04.27
[스크랩] 마우스 버튼 양쪽모두 사용금지 시키기  (0) 2006.04.27
[스크랩] Navigator  (0) 2006.04.26
[스크랩] Math 객체  (0) 2006.04.26
[스크랩] Typeof연산자  (0) 2006.04.26

'IT_Programming/JavaScript'의 다른글

  • 현재글[스크랩] 폼 입력창에 한글과 영어를 제외한 숫자만 인식하는 방법

관련글

티스토리툴바