여니씨의 귀차니즘

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>