사이트 내 전체검색
[javascript] input 에 숫자만 입력받기
로빈아빠
https://cmd.kr/javascript/534 URL이 복사되었습니다.

본문

1. 먼저 숫자만 입력받을 컨트롤을 다음과 같이 설정한다.

<input type="text" name="card_no1" onKeypress="onlyNumber();">

키를 누를때마다 다음과 onlyNumber() 라는 함수를 실행한다.

2. 이제 함수를 정의한다.
function onlyNumber()
{
if ((event.keyCode<48)||(event.keyCode>57))
event.returnValue = false;

}
이벤트 객체의 keyCode 속성을 이용하여 해당 키 코드값일때만 입력되게 한다

근데. 이게 말이다. 혹시 입력자가.. 한/영모드로 바꿔서



한글을 입력하게 될 경우 안 먹는다는 사실을 아는가...



음 이것을 막는 방법으로.. 스타일 속성에 imeMode 를 이용하는 방법이 있다..





txtData 라는 ID 를 가진 텍스트박스가 있을 경우



태그에서는 <input type=text id=txtData style="ime-mode:disabled">



스크립트에서는 document.all.txtData.style.imeMode = "disabled";



imeMode 속성에 대해서 알아보면



1. auto -> 기본값. 아무것도 지정 안하면 이거다.

2. active -> 포커스가 들어가자마자.. 한글입력가능

3. inactive -> 포커스가 들어가자마자.. 영어

4. disabled -> 한글 입력 불가..^^;;



음 이 속성 주의할 것은.. 명시적으로 active 로 주고 나서..



다음에 아무것도 지정안한 텍슨트박스로 가면 auto 라서 active 영향을 받게 되서

한글을 입력받게 된다..



그러므로... 다음게 영어로 입력받게 하고 싶으면 명시적으로 inactive 를 지정해야된다는 사실





상기의 요소는 회원가입, 게시판 등에 유용하게 사용할 수 있다. 키보드에서 입력되는 한영전환 단계를 줄이고, UI를 향상시킬 수 있으므로, 여러모로 잘 활용하면 아주 유용하다. 특히 해외여행 분야와 같은 특정 분야에서는 대문자만으로 정보처리가 되므로 Caps Lock 키의 입력을 줄일 수 있으므로 알아두면 유용하게 사용할 수 있다. 뭐 새로울 것도 없지만 말 그대로 TIP이다.(Short but useful information)

1. 한영전환
-------------------------------------------------------------------------
<!-- 주변의 모든 폼요소를 한글로 초기화 -->
ⓐ <input type="text" style="ime-mode:active" />
(당연히 영어로 전환이 가능하다.)


<!-- 한글모드에서 다시 영문모드로 복뒤, 이후의 요소를 모두 영문으로 복귀시킴 -->
ⓑ <input type="text" style="ime-mode:inactive" />
<input type="text" /> <!-- 영문으로 입력됨 -->


한글문자 입력 금지 (원천봉쇄): 아예 한/영 키를 눌러도 한글이 입력되지 않는다.
ⓒ <input type="text" style="ime-mode:disabled" />


2. 영문자의 대소문자
------------------------------------------------------------------------
마찬가지로 id 등의 요소에는 영문자만 입력되게 할 수 있는데, Javascript를 이용한 방법보다 훨씬 쉽고, 직관적이다.


<p style="text-transform: capitalize">첫번째 영문자만 대문자 : This site is motifdn</p>
<p style="text-transform: uppercase">모두 대문자 : This sitem is motifdn</p>
<p style="text-transform: lowercase">모두 소문자 : This site is motifdn</p>

댓글목록

등록된 댓글이 없습니다.

831 (8/17P)

Search

Copyright © Cmd 명령어 18.219.209.144