javascript 자바스크립트 숫자만 입력
페이지 정보
본문
input 필드에 숫자만 입력받기
seung lyul ryu2014년 7월 1일
입력양식에서 값을 입력받을 때 클라이언트(브라우저) 차원에서 숫자만 입력받도록 제한해야 할 경우가 있다. 예를 들어 금액이나 날짜 그리고 인원 수 등을 입력 받는데 숫자가 아닌 문자가 입력되면 에러가 발생하거나 서버까지 전달된 후 체크하게 되면 사용자는 처음부터 다시 입력해야 하는 등 문제가 발생할 수 있기 때문이다.
여기서는 이와 같이 텍스트 필드(대표적으로 input 필드)에 오직 숫자만 입력받도록 처리하는 방법에 대해 알아보자. 간단한 작업인 것 같지만 크로스브라우징이나 사용자 입력 편의 등을 고려하면 그렇게 간단하지만은 안다.
html 5 : input type=number?
html 5 작업초안에는 위와 같이 input 필드의 type 중 하나로 number를 추가하여 제안하였다. 이는 숫자만 입력받는 필드를 표시한다.
1
<input type="number" name="quantity" min="1" max="5">
이렇게 하면 1부터 5까지의 숫자만 입력할 수 있거나, 박스의 오른쪽 끝에 보이는 상/하 화살표를 눌러 범위 내의 값을 선택할 수 있다.
그러나 이 글을 쓰는 현재까지 number 타입은 다른 새로운 input 타입들이 그렇듯이 여러 최신 브라우저들에서조차 완벽하게 작동하지 않는다. 브러우저 환경의 변화속도와 새로운 웹 표준의 일반화 속도 등을 감안하면 아마도 몇 년은 더 걸릴 것으로 보인다.
따라서 이 코드는 현재로서는 사용할 수는 있으나 완벽한 방법은 아니다. 결국 javascript를 활용한 방법을 사용하는 것이 필요하다.
먼저 사전 지식으로 event에 대해 알아보자.
event
event란 html의 구성요소들에 일어나는 “일” 또는 “사건”이다. 마우스가 어떤 요소위에 올라가거나 벗어날 때와 클릭 동작이 이루어 질 때, 키보드를 입력할 때에도 event가 발생한다. 페이지를 다 읽어들인 것도 하나의 event라고 하며 페이지를 벗어나는 것도 event이다. 이와 같이 하나의 페이지에서 벌어지는 모든 일들이 다 이벤트라 할 수 있다. 자바스크립트를 활용하면 이런 event들에 대해 반응할 수 있다. 즉 사건이 발생할 때를 캐치하여 지정한 동작을 하도록 할 수 있다. 예를 들어 div 객체에 마우스를 클릭하면 어떤 동작을 하게 하려면 다음과 같이 하면 된다.
1
<div onclick="alert('hello');">...</div>
onclick 외에 더 많은 event 리스트는 이 링크 http://www.w3schools.com/jsref/dom_obj_event.asp 를 참조하기 바란다. 여기서 다루는 event는 키보드를 입력할 때에 발생하는 event들이다. 키보드 event 는 onkeydown, onkeypress, onkeyup 이렇게 세 가지가 있다. onkeydown은 키를 누르고 있을 때 발생하는 이벤트이다. onkeypress는 미묘한 차이가 있지만 onkeydown과 거의 같다. 다만 charCode 값은 onkeypress에서만 얻을 수 있는 값이다. 이런 복잡성 때문에 여기서는 onkeydown만을 다루기로 한다. onkeyup은 눌렀던 키를 떼었을 때 발생하는 event이다.
어떤 키가 눌렸는지 알아내는 방법
javascript로 숫자만 입력 받기 예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>입력된 키코드 확인하기</title>
</head>
<body>
<p>입력된 키코드 확인하기</p>
<form>
<p>
<input type="text" onkeydown="showKeyCode(event)">
<span id="keyinfo"></span>
</p>
</form>
<script>
function showKeyCode(event) {
event = event || window.event;
document.getElementById('keyinfo').innerHTML = event.keyCode;
}
</script>
</body>
</html>
이 예제에서는 키가 눌리면 showKeyCode 함수가 호출된다. showKeyCode 함수를 호출할 때 event 객체를 함께 넘긴다. 이렇게 하면 html에서 발생한 사건을 함수에게 넘겨줄 수 있다. 이제 함수 안에 필요한 동작이나 기능을 정의하면 된다. event = event || window.event; 함수 안에는 event = event || window.event; 가 제일 처음에 나온다. 이것은 IE와 Firefox 등 다른 브라우저들이 event를 다루는 방법이 서로 다르기 때문인데 예를 들어 IE는 event를 window.event로 받아들이지만 다른 브라우저들은 함수를 호출할 때 넘겨준 event로 발생한 사건을 캐치할 수 있다. event = event || window.event; 구문은 인수로 전달받은 event가 유효하면 이를 event에 스스로를 다시 한 번 대입하고 IE 브라우저에서 사용할 경우 념겨받은 event가 무효한 경우 window.event로 대신하겠다는 것이다. event.keyCode event.keyCode는 입력된 키의 코드 값을 얻는다. 예를 들어 키보드의 0~9의 숫자는 48~57의 키코드를 가지며, 오른쪽쪽 숫자키 패드의 0~9는 96~105의 키코드를 갖는다. 문자나 숫자 키 외에 다른 키들도 모두 코드를 갖는데 예를 들어 8=Backspace, 46=Delete, 37=왼쪽 화살표, 39=오른쪽 화살표이다. 보다 자세한 키 코드 테이블은 이 링크 http://www.foreui.com/articles/Key_Code_Table.htm 에서 확인해보자.
입력된 키가 숫자인지 확인하기
입력된 키가 숫자인지 확인하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>입력된 키가 숫자인지 확인하기</title>
</head>
<body>
<p>입력된 키가 숫자인지 확인하기</p>
<form>
<p>
<input type="text" onkeydown="showKeyCode(event)">
<span id="keyinfo"></span>
</p>
</form>
<script>
function showKeyCode(event) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 ) )
{
document.getElementById("keyinfo").innerHTML = keyID + " = 숫자키";
}
else
{
document.getElementById("keyinfo").innerHTML = keyID + " = 숫자키 아님";
}
/* 48~57:일반 숫자키 코드, 96~105:숫자키패드 숫자키 코드 */
}
</script>
</body>
</html>
var keyID = (event.which) ? event.which : event.keyCode;
이 코드는 다음 코드와 같다.
if( event.which )
{
var keyId = event.which;
}
else
{
var keyId = event.keyCode;
}
입력된 키의 코드를 얻어내는데 일반적으로 사용되는 keyCode만 사용하면 되지 위에서 처럼 which까지 검토하였다. 이것은 사실 필요 없을 수도 있다. 그러나 그것은 keydown 이벤트를 사용할 때만이다. 만일 keydown 대신에 keypress를 사용하면 키코드는 keyCode가 아닌 which로 확인하게 된다. 따라서 위와 같은 코드가 필요하게 된 것이다. 이런 복잡한 문제 때문에 특별한 경우가 아니면 keydown을 사용할 것을 권장한다. keydown을 사용한다면 위의 코드 대신에 아래와 같이 한 줄로 써주면 그만이다. 여기서는 이러한 차이점을 설명하기 위해 조금 복잡하지만 위와 같이 구성해본 것이다.
1
var keyId = event.keyCode;
if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 ) ) { //… } else { //… }
키코드가 (48 이상, 57 이하) 이거나(또는) (96 이상 105 이하)이면 “숫자키”라고 표시하고 두 경우에 해당하지 않으면 “숫자키 아님”이라고 표시하도록 한 코드이다. 앞에서 설명한대로 코드키 48~57은 키보드의 일반 숫자키 0~9에 해당한다. 또 96~105는 대부분 키보드의 오른쪽에 있는 숫자키 패드의 숫자키 코드이다. 이 두 조건 중에 하나를 만족하면 숫자가 입력된 것이다.
숫자가 아니면 입력되지 않게 하기
위의 코드에 약간의 변화를 주면 숫자 외에는 입력되지 않게 할 수 있다. 먼저 전체 코드를 보자.
숫자가 아니면 입력되지 않게 하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>숫자만 입력받기</title>
</head>
<body>
<p>숫자만 입력받기</p>
<form>
<p>
<input type="text" onkeydown="return showKeyCode(event)">
<span id="keyinfo"></span>
</p>
</form>
<script>
function showKeyCode(event) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 ) )
{
return;
}
else
{
return false;
}
}
</script>
</body>
</html>
<input type=”text” onkeydown=”return showKeyCode(event)”> onkeydown에 return이 추가 되었다. <input type=”text” onkeydown=”showKeyCode(event)”>를 <input type=”text” onkeydown=”return showKeyCode(event)”>와 같이 바꾼 것이다. 이렇게 하면 어떤 차이가 있을까? 이런 return 방식은 form에서 onsubmit=”return checkForm()” 과 같이 사용해보았을 것이다. form 문에서 위와 같이 하면 checkForm 함수에서 false가 반환되면 form의 submit 이 작동하지 않고 true가 반환되었을 때만 작동하게 된다. 여기 input 필드에서도 마찬가지이다. onkeydown=”return showKeyCode(event)” 과 같이 하면 showKeyDown 함수를 호출해서 결과가 true이면 본래의 동작을 그대로 수행하고 false이면 본래의 동작을 중단시킨다. 즉 keydown 이벤트가 발생해서 처리해야 할 일인 문자 입력을 중단하게 되는 것이다. return false가 아닌 그냥 return만 쓴 것은 return true;와 같다. 따라서 showKeyCode 함수 내에서 숫자키이면 return을 숫자키가 아니면 return false를 실행시키면, 숫자인 경우에는 그대로 입력이 진행되고 아닌 경우에는 입력이 되지 않게 되는 것이다.
편집키 허용하기
위 예제에서는 숫자만 입력이 허용되었다. 그러나 편집을 위해서는 화살표 키, Delete 키, Backspace 등을 허용해야 할 필요가 있다. 앞에서 소개한대로 편집키에는 8=Backspace, 46=Delete, 37=왼쪽 화살표, 39=오른쪽 화살표 등이 있다. 여기서는 이 네 가지 키를 허용하도록 코드를 고쳐보자. 방법은 간단하다. 조건문에 숫자인 경우에만 true를 반환하던 것을 위 네 가지 키에도 그러도록 해주면 된다. 조건문을 아래와 같이 고치면 된다.
1
if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 ) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
이렇게 바꿔주면 숫자 외에 왼쪽/오른쪽 화살표 키와 Delete 키, Backspace가 추가로 허용된다. 아래에서 직접 변경된 결과를 확인해보자. 이제 화살표키와 삭제 키가 동작할 것이다.
한글 입력 시 문제 해결하기
위 예제들 중 숫자 또는 숫자와 편집키만 입력되도록 한 예제들에서 문자를 입력할 때 [한/영] 키를 눌러 한글 입력 상태에서 한글을 입력해보자. 영문입력상태에서는 숫자가 아니면 입력조차 되지 않았는데 한글이 그대로 입력되는 것을 볼 수 있다. 이는 한글이 기본 키보드 상에 존재하는 키코드의 범위가 아니기 때문에 일종의 인식안됨 상태라 제대로 작동하지 않는 것으로 보인다.
ime-mode: disabled;
ime-mode는 css 속성으로 텍스트 입력 필드에서 부가 입력 언어를 설정하는 속성이다. 우리나라의 경우 한글 입력에 대한 설정이다. 값으로는 auto, normal, active, inactive, disabled 가 있다. 이중 active로 설정하면 [한/영]키 입력 여부와 관계 없이 기본적으로 한글 입력상태가 되고, disabled로 해두면 기본적으로 영문입력상태가 된다. 따라서 input 태그에 style=”ime-mode: disabled;”를 추가해주면 한글이 입력되지 않게 되므로 한글 입력 시의 문제가 해결된다.
그러나,
ime-mode는 모든 브라우저가 지원하지 않는다. 오직 IE(5.0 이상)와 Firefox(3.0 이상)만 지원한다. 일단 이 속성을 통해 두 브라우저에서만이라도 한글 입력을 원천적으로 막아보자. 그리고 다른 브라우저들에서는 아래의 방법으로 문제를 해결할 수 있다.
숫자가 아닌 문자 제거하기
이미 onkeydown 이벤트를 통해 숫자와 일부 편집키만 입력되도록 구성하였다. 그럼에도 불구하고 한글은 여전히 입력되고 있다. ime-mode를 disabled로 하면 한글 입력을 막을 수 있지만 두 개의 브라우저만 지원하다. 그러다면 입력된 문자들 중에서 숫자가 아닌 것을 제거하는 방법이 있다. onkeydown에 대해서는 할만큼 했으니 이제는 onkeyup에서 조치해보기로 하자.
먼저 위의 코드 중에서 showKeyCode 함수명을 의미에 맞게 onlyNumber로 바꿔보자. 그리고 input 필드에 onkeyup=”removeChar(event)” 를 추가해 보자.
<input type="text" onkeydown='return onlyNumber(event)' onkeyup='removeChar(event)' style='ime-mode:disabled;'>
그리고 스크립트 영역을 다음과 같이 수정해보자.
function onlyNumber(event){
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if ( (keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
return;
else
return false;
}
function removeChar(event) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
return;
else
event.target.value = event.target.value.replace(/[^0-9]/g, "");
}
최종코드
위의 수정 사항을 반영하여 아래 최종 코드가 있다. 코드를 살펴보고 실행해보자.
숫자만 입력 받기 - 최종코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>input 필드에 오직 숫자만 입력 받기</title>
</head>
<body>
<h1>input 필드에 오직 숫자만 입력 받기</h1>
<form>
<p><input type="text" onkeydown='return onlyNumber(event)' onkeyup='removeChar(event)' style='ime-mode:disabled;'></p>
</form>
<script>
function onlyNumber(event){
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if ( (keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
return;
else
return false;
}
function removeChar(event) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
return;
else
event.target.value = event.target.value.replace(/[^0-9]/g, "");
}
</script>
</body>
</html>
Share the joy
seung lyul ryu2014년 7월 1일
입력양식에서 값을 입력받을 때 클라이언트(브라우저) 차원에서 숫자만 입력받도록 제한해야 할 경우가 있다. 예를 들어 금액이나 날짜 그리고 인원 수 등을 입력 받는데 숫자가 아닌 문자가 입력되면 에러가 발생하거나 서버까지 전달된 후 체크하게 되면 사용자는 처음부터 다시 입력해야 하는 등 문제가 발생할 수 있기 때문이다.
여기서는 이와 같이 텍스트 필드(대표적으로 input 필드)에 오직 숫자만 입력받도록 처리하는 방법에 대해 알아보자. 간단한 작업인 것 같지만 크로스브라우징이나 사용자 입력 편의 등을 고려하면 그렇게 간단하지만은 안다.
html 5 : input type=number?
html 5 작업초안에는 위와 같이 input 필드의 type 중 하나로 number를 추가하여 제안하였다. 이는 숫자만 입력받는 필드를 표시한다.
1
<input type="number" name="quantity" min="1" max="5">
이렇게 하면 1부터 5까지의 숫자만 입력할 수 있거나, 박스의 오른쪽 끝에 보이는 상/하 화살표를 눌러 범위 내의 값을 선택할 수 있다.
그러나 이 글을 쓰는 현재까지 number 타입은 다른 새로운 input 타입들이 그렇듯이 여러 최신 브라우저들에서조차 완벽하게 작동하지 않는다. 브러우저 환경의 변화속도와 새로운 웹 표준의 일반화 속도 등을 감안하면 아마도 몇 년은 더 걸릴 것으로 보인다.
따라서 이 코드는 현재로서는 사용할 수는 있으나 완벽한 방법은 아니다. 결국 javascript를 활용한 방법을 사용하는 것이 필요하다.
먼저 사전 지식으로 event에 대해 알아보자.
event
event란 html의 구성요소들에 일어나는 “일” 또는 “사건”이다. 마우스가 어떤 요소위에 올라가거나 벗어날 때와 클릭 동작이 이루어 질 때, 키보드를 입력할 때에도 event가 발생한다. 페이지를 다 읽어들인 것도 하나의 event라고 하며 페이지를 벗어나는 것도 event이다. 이와 같이 하나의 페이지에서 벌어지는 모든 일들이 다 이벤트라 할 수 있다. 자바스크립트를 활용하면 이런 event들에 대해 반응할 수 있다. 즉 사건이 발생할 때를 캐치하여 지정한 동작을 하도록 할 수 있다. 예를 들어 div 객체에 마우스를 클릭하면 어떤 동작을 하게 하려면 다음과 같이 하면 된다.
1
<div onclick="alert('hello');">...</div>
onclick 외에 더 많은 event 리스트는 이 링크 http://www.w3schools.com/jsref/dom_obj_event.asp 를 참조하기 바란다. 여기서 다루는 event는 키보드를 입력할 때에 발생하는 event들이다. 키보드 event 는 onkeydown, onkeypress, onkeyup 이렇게 세 가지가 있다. onkeydown은 키를 누르고 있을 때 발생하는 이벤트이다. onkeypress는 미묘한 차이가 있지만 onkeydown과 거의 같다. 다만 charCode 값은 onkeypress에서만 얻을 수 있는 값이다. 이런 복잡성 때문에 여기서는 onkeydown만을 다루기로 한다. onkeyup은 눌렀던 키를 떼었을 때 발생하는 event이다.
어떤 키가 눌렸는지 알아내는 방법
javascript로 숫자만 입력 받기 예제
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>입력된 키코드 확인하기</title>
</head>
<body>
<p>입력된 키코드 확인하기</p>
<form>
<p>
<input type="text" onkeydown="showKeyCode(event)">
<span id="keyinfo"></span>
</p>
</form>
<script>
function showKeyCode(event) {
event = event || window.event;
document.getElementById('keyinfo').innerHTML = event.keyCode;
}
</script>
</body>
</html>
이 예제에서는 키가 눌리면 showKeyCode 함수가 호출된다. showKeyCode 함수를 호출할 때 event 객체를 함께 넘긴다. 이렇게 하면 html에서 발생한 사건을 함수에게 넘겨줄 수 있다. 이제 함수 안에 필요한 동작이나 기능을 정의하면 된다. event = event || window.event; 함수 안에는 event = event || window.event; 가 제일 처음에 나온다. 이것은 IE와 Firefox 등 다른 브라우저들이 event를 다루는 방법이 서로 다르기 때문인데 예를 들어 IE는 event를 window.event로 받아들이지만 다른 브라우저들은 함수를 호출할 때 넘겨준 event로 발생한 사건을 캐치할 수 있다. event = event || window.event; 구문은 인수로 전달받은 event가 유효하면 이를 event에 스스로를 다시 한 번 대입하고 IE 브라우저에서 사용할 경우 념겨받은 event가 무효한 경우 window.event로 대신하겠다는 것이다. event.keyCode event.keyCode는 입력된 키의 코드 값을 얻는다. 예를 들어 키보드의 0~9의 숫자는 48~57의 키코드를 가지며, 오른쪽쪽 숫자키 패드의 0~9는 96~105의 키코드를 갖는다. 문자나 숫자 키 외에 다른 키들도 모두 코드를 갖는데 예를 들어 8=Backspace, 46=Delete, 37=왼쪽 화살표, 39=오른쪽 화살표이다. 보다 자세한 키 코드 테이블은 이 링크 http://www.foreui.com/articles/Key_Code_Table.htm 에서 확인해보자.
입력된 키가 숫자인지 확인하기
입력된 키가 숫자인지 확인하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>입력된 키가 숫자인지 확인하기</title>
</head>
<body>
<p>입력된 키가 숫자인지 확인하기</p>
<form>
<p>
<input type="text" onkeydown="showKeyCode(event)">
<span id="keyinfo"></span>
</p>
</form>
<script>
function showKeyCode(event) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 ) )
{
document.getElementById("keyinfo").innerHTML = keyID + " = 숫자키";
}
else
{
document.getElementById("keyinfo").innerHTML = keyID + " = 숫자키 아님";
}
/* 48~57:일반 숫자키 코드, 96~105:숫자키패드 숫자키 코드 */
}
</script>
</body>
</html>
var keyID = (event.which) ? event.which : event.keyCode;
이 코드는 다음 코드와 같다.
if( event.which )
{
var keyId = event.which;
}
else
{
var keyId = event.keyCode;
}
입력된 키의 코드를 얻어내는데 일반적으로 사용되는 keyCode만 사용하면 되지 위에서 처럼 which까지 검토하였다. 이것은 사실 필요 없을 수도 있다. 그러나 그것은 keydown 이벤트를 사용할 때만이다. 만일 keydown 대신에 keypress를 사용하면 키코드는 keyCode가 아닌 which로 확인하게 된다. 따라서 위와 같은 코드가 필요하게 된 것이다. 이런 복잡한 문제 때문에 특별한 경우가 아니면 keydown을 사용할 것을 권장한다. keydown을 사용한다면 위의 코드 대신에 아래와 같이 한 줄로 써주면 그만이다. 여기서는 이러한 차이점을 설명하기 위해 조금 복잡하지만 위와 같이 구성해본 것이다.
1
var keyId = event.keyCode;
if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 ) ) { //… } else { //… }
키코드가 (48 이상, 57 이하) 이거나(또는) (96 이상 105 이하)이면 “숫자키”라고 표시하고 두 경우에 해당하지 않으면 “숫자키 아님”이라고 표시하도록 한 코드이다. 앞에서 설명한대로 코드키 48~57은 키보드의 일반 숫자키 0~9에 해당한다. 또 96~105는 대부분 키보드의 오른쪽에 있는 숫자키 패드의 숫자키 코드이다. 이 두 조건 중에 하나를 만족하면 숫자가 입력된 것이다.
숫자가 아니면 입력되지 않게 하기
위의 코드에 약간의 변화를 주면 숫자 외에는 입력되지 않게 할 수 있다. 먼저 전체 코드를 보자.
숫자가 아니면 입력되지 않게 하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>숫자만 입력받기</title>
</head>
<body>
<p>숫자만 입력받기</p>
<form>
<p>
<input type="text" onkeydown="return showKeyCode(event)">
<span id="keyinfo"></span>
</p>
</form>
<script>
function showKeyCode(event) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 ) )
{
return;
}
else
{
return false;
}
}
</script>
</body>
</html>
<input type=”text” onkeydown=”return showKeyCode(event)”> onkeydown에 return이 추가 되었다. <input type=”text” onkeydown=”showKeyCode(event)”>를 <input type=”text” onkeydown=”return showKeyCode(event)”>와 같이 바꾼 것이다. 이렇게 하면 어떤 차이가 있을까? 이런 return 방식은 form에서 onsubmit=”return checkForm()” 과 같이 사용해보았을 것이다. form 문에서 위와 같이 하면 checkForm 함수에서 false가 반환되면 form의 submit 이 작동하지 않고 true가 반환되었을 때만 작동하게 된다. 여기 input 필드에서도 마찬가지이다. onkeydown=”return showKeyCode(event)” 과 같이 하면 showKeyDown 함수를 호출해서 결과가 true이면 본래의 동작을 그대로 수행하고 false이면 본래의 동작을 중단시킨다. 즉 keydown 이벤트가 발생해서 처리해야 할 일인 문자 입력을 중단하게 되는 것이다. return false가 아닌 그냥 return만 쓴 것은 return true;와 같다. 따라서 showKeyCode 함수 내에서 숫자키이면 return을 숫자키가 아니면 return false를 실행시키면, 숫자인 경우에는 그대로 입력이 진행되고 아닌 경우에는 입력이 되지 않게 되는 것이다.
편집키 허용하기
위 예제에서는 숫자만 입력이 허용되었다. 그러나 편집을 위해서는 화살표 키, Delete 키, Backspace 등을 허용해야 할 필요가 있다. 앞에서 소개한대로 편집키에는 8=Backspace, 46=Delete, 37=왼쪽 화살표, 39=오른쪽 화살표 등이 있다. 여기서는 이 네 가지 키를 허용하도록 코드를 고쳐보자. 방법은 간단하다. 조건문에 숫자인 경우에만 true를 반환하던 것을 위 네 가지 키에도 그러도록 해주면 된다. 조건문을 아래와 같이 고치면 된다.
1
if( ( keyID >=48 && keyID <= 57 ) || ( keyID >=96 && keyID <= 105 ) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
이렇게 바꿔주면 숫자 외에 왼쪽/오른쪽 화살표 키와 Delete 키, Backspace가 추가로 허용된다. 아래에서 직접 변경된 결과를 확인해보자. 이제 화살표키와 삭제 키가 동작할 것이다.
한글 입력 시 문제 해결하기
위 예제들 중 숫자 또는 숫자와 편집키만 입력되도록 한 예제들에서 문자를 입력할 때 [한/영] 키를 눌러 한글 입력 상태에서 한글을 입력해보자. 영문입력상태에서는 숫자가 아니면 입력조차 되지 않았는데 한글이 그대로 입력되는 것을 볼 수 있다. 이는 한글이 기본 키보드 상에 존재하는 키코드의 범위가 아니기 때문에 일종의 인식안됨 상태라 제대로 작동하지 않는 것으로 보인다.
ime-mode: disabled;
ime-mode는 css 속성으로 텍스트 입력 필드에서 부가 입력 언어를 설정하는 속성이다. 우리나라의 경우 한글 입력에 대한 설정이다. 값으로는 auto, normal, active, inactive, disabled 가 있다. 이중 active로 설정하면 [한/영]키 입력 여부와 관계 없이 기본적으로 한글 입력상태가 되고, disabled로 해두면 기본적으로 영문입력상태가 된다. 따라서 input 태그에 style=”ime-mode: disabled;”를 추가해주면 한글이 입력되지 않게 되므로 한글 입력 시의 문제가 해결된다.
그러나,
ime-mode는 모든 브라우저가 지원하지 않는다. 오직 IE(5.0 이상)와 Firefox(3.0 이상)만 지원한다. 일단 이 속성을 통해 두 브라우저에서만이라도 한글 입력을 원천적으로 막아보자. 그리고 다른 브라우저들에서는 아래의 방법으로 문제를 해결할 수 있다.
숫자가 아닌 문자 제거하기
이미 onkeydown 이벤트를 통해 숫자와 일부 편집키만 입력되도록 구성하였다. 그럼에도 불구하고 한글은 여전히 입력되고 있다. ime-mode를 disabled로 하면 한글 입력을 막을 수 있지만 두 개의 브라우저만 지원하다. 그러다면 입력된 문자들 중에서 숫자가 아닌 것을 제거하는 방법이 있다. onkeydown에 대해서는 할만큼 했으니 이제는 onkeyup에서 조치해보기로 하자.
먼저 위의 코드 중에서 showKeyCode 함수명을 의미에 맞게 onlyNumber로 바꿔보자. 그리고 input 필드에 onkeyup=”removeChar(event)” 를 추가해 보자.
<input type="text" onkeydown='return onlyNumber(event)' onkeyup='removeChar(event)' style='ime-mode:disabled;'>
그리고 스크립트 영역을 다음과 같이 수정해보자.
function onlyNumber(event){
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if ( (keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
return;
else
return false;
}
function removeChar(event) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
return;
else
event.target.value = event.target.value.replace(/[^0-9]/g, "");
}
최종코드
위의 수정 사항을 반영하여 아래 최종 코드가 있다. 코드를 살펴보고 실행해보자.
숫자만 입력 받기 - 최종코드
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>input 필드에 오직 숫자만 입력 받기</title>
</head>
<body>
<h1>input 필드에 오직 숫자만 입력 받기</h1>
<form>
<p><input type="text" onkeydown='return onlyNumber(event)' onkeyup='removeChar(event)' style='ime-mode:disabled;'></p>
</form>
<script>
function onlyNumber(event){
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if ( (keyID >= 48 && keyID <= 57) || (keyID >= 96 && keyID <= 105) || keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
return;
else
return false;
}
function removeChar(event) {
event = event || window.event;
var keyID = (event.which) ? event.which : event.keyCode;
if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 )
return;
else
event.target.value = event.target.value.replace(/[^0-9]/g, "");
}
</script>
</body>
</html>
Share the joy
관련링크
-
http://webskills.kr/archives/310
5818회 연결
- 이전글php sendmail 보내기 (Centos sendmail 설정) 20.02.21
- 다음글php 파일 업로드 안되는 경우( 코드이그나이터) 20.02.21
댓글목록
등록된 댓글이 없습니다.