Q) HTML의 input box에 정수만 입력하게 하려면?
방법1 : input type을 number로 준다.
<input type="number" min="0" max="100" id="numBox" class="numBox" />
물론 타입을 넘버로 주면 한글이나 다른 특수문자는 들어가지 않으나,
음수(-)와 소수점(.)은 입력할 수 있다. 정수범위도 키보드로는 입력가능하다.
따라서 type은 text로 두고, 키보드 입력값만 비교해 체크하는 걸 추천한다.
방법2 : 정규식을 사용한다.
정규식에 대한 자세한 사항은 어디에나 나와있으므로 적지 않겠다.
정규식은 '/'로 묶어서 사용하며, 따옴표가 없어도 변수에 선언할 수 있다.
'^'는 시작문자열, '$'는 끝문자열을 의미한다.
6
7
8
9
10
11
12
13
14
15
16
17
18
|
var initRegist = function(){
var regNumber = /^[0-9]+$/; //정수만 입력되도록 하는 정규식
var tmpNum = $("#numBox").val(); //입력된 value를 가져옴
$("#numBox").blur(function() { //input창에서 벗어날 때 실행됨
var tmpKey = $("#numBox").val(); //벗어날 때의 input value를 가져옴
if(!(regNumber.test(tmpKey)) || $("#numBox").val() > 99) {
alert('단수에는 0 ~ 99까지의 숫자만 입력할 수 있습니다.');
$("#numBox").val(tmpNum);
}
});
}
| cs |
1. initRegist 메소드는 위와 같이 정규식을 사용해 input box에 정수만
입력할 수 있음을 클라이언트 단에(사용자에게) 알리는 역할을 한다.
2. input box에 값을 입력하고 그 창에서 벗어나면 입력된 값을 tmpkey에 넣고,
정수체크 정규식인 regNumber에 해당사항이 없는 경우 값을 지우게 되어있다.
이는 간단히 사용자에게 알리기만 할 뿐, 키보드로 입력할 때마다 체크하진 못한다.
3. 따라서 입력할 때마다 체크해 바로바로 값을 지우고 싶다면,
아래처럼 keypress()메소드를 사용하자.
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$("#numBox").keypress(function(event) {
var key = event.key; //키보드로 입력한 값
if(!(regNumber.test(key))) {
alert('단수에는 숫자만 입력해주세요.');
}
});
$("#numBox").blur(function() {
var tmpKey = $("#numBox").val();
if(!(regNumber.test(tmpKey))) {
$("#numBox").val(tmpKey.slice(0,-1));
}
});
| cs |
알림창이 보이면서 자동으로 blur되기 때문에 두 번째 메소드가 실행된다.
2. blur되면서 입력된 값이 input의 value로 저장되므로 가져와서 쓸 수 있다.
slice는 문자열을 자르기 위한 함수로, 마지막 문자(잘못 쓴 문자)를 지운다.
이때 잘못 입력된 값이 지워지면서 커서가 첫 문자열로 가는데,
커서를 마지막에 두는 부분을 추가하면 더 좋은 코드가 될 것이다.
커서를 제어하는 부분은 setSelection(), setSelectionRange()함수를 찾아보자.
댓글 없음:
댓글 쓰기