자바스크립트 숫자만 입력 받게 하는 방법 - 총괄편 - 
JAVASCRIPT/CSS참고 / 기존정보
2012/02/28 17:55
http://blog.naver.com/finekiller/70132559572
|
Written by this.CafeManager.Drift
%% Form의 Input type="text"에 숫자만 입력 받게 하자 %%
%% 일단, 자바스크립트의 keypress 이벤트에 입력제한을 둡니다. %%
#1. 초보는 키패드 위의 숫자만 입력받게 하고 싶어 합니다... 아래는 버젼 1
// 48~57은 숫자 0~9입니다... 키보드 상단의 일렬로 있는 숫자 키.
function OnlyNumber() {
if((event.keyCode<48)||(event.keyCode>57))
{
event.returnValue=false;
}
}
컨트롤에 적용시키면
<INPUT type=text id=text1 name=text1 onkeypress="OnlyNumber()">
이러면 됐겠나 싶은데 어쩔까나... 영문과 각종 기호는 제한되는데 한글은 입력이 됩니다.
또한 오른쪽 숫자 키패드는 키코드가 다르므로 입력이 안됩니다.
키패드의 0 ~ 9 의 키코드 값은 96 ~ 105 입니다. 따라서 우측 키패드 숫자까지 포함된 버젼은
#2. 버젼2 - 중수는 오른쪽 키패드의 숫자키를 생각합니다...
<script type="text/javascript">
function checkKeyCode(){
if(event.keyCode<48||(event.keyCode>57&&event.keyCode<96)||event.keyCode>105){
event.returnValue = false;
}
}
</script>
그러나.....
#3. 버젼 3 - 중수보다 좀 나은 애는... 숫자 키+숫자키패드 외에 사용자의 편의를 위해 몇 몇의 키를 더 허용 합니다... (Ctrl+V - -이건 어때?)
←(백스패이스) = 8
TAB = 9 |
END = 35
HOME =36
← = 37
→ = 39
INSERT = 45
DELETE = 46
NUMLOCK = 144
<script type="text/javascript">
function onlyNum(){
var key = event.keyCode;
var messageArea = document.getElementById("ssnMessage");
if(!(key==8||key==9||key==13||key==46||key==144||(key>=48&&key<=57)||key==110||key==190)){
alert('숫자만 입력 가능합니다');
event.returnValue = false;
}
}
</script>
#4. 버젼 4 - 고수는 3번 버젼에 추가하여 한글을 막는다 !
입력받는 인풋단..에서..
<input type="text" style="ime-mode:disabled" > // 이 스타일은 외국어 입력 못하게 함(영어를 제외한 한국어 포함 - -);
Written by this.CafeManager.Drift
onkeydown시 행동과 onkeypress와 같이 적용이 되긴 하는데
두개의 차이점은 직접 검색해서 알아보세요~~ 제가 아는 1가지 예는 CTRL+V 같은 경우
두 이벤트 중 하나는 CTRL눌렀을시 바로 판정을 하고 다른 하나는 나머지 V를 눌렀을 때 판정이 나온다는 것 입니다..
Shift키로 작동하는 (예를들어 @,%,#) 이런것도 두 이벤트가 다르게 처리합니다.
꼼꼼하게 검증하지는 않은 소스이니 다듬어서 사용하세요
|
