결론부터 얘기하자면 3번 방법인 replace함수를 사용하는게 가장 좋다고 생각한다
1. input 박스 type을 number로 설정
<input type="number"/>가장 심플하지만 애매하다. 브라우저에 따라 input 박스에 증감 버튼이 생긴다.
맘에 안듬.
2. 입력된 key값 체크
<script type='text/javascript'>
//방법1
function checkNumber(event) {
if(event.key === '.' || event.key === '-'
|| event.key >= 0 && event.key <= 9) {
return true;
}
return false;
}
//방법2
$(document).ready(function(){
$("#num_chk").on("keyup", function() {
$(this).val($(this).val().replace(/[^0-9]/g,""));
});
});
</script>
<html>
<input type='text' onkeypress='return checkNumber(event)'>
<input type='text' id='num_chk'>
</html>키 이벤트를 체크하여 텍스트 입력을 받는 방법이다.
1번 방법의 단점은 복사 붙여넣기를 캐치할 수 없다는 점.
2번 방법은 숫자가 순간 보였다가 사라진다는 점.
3. oninput 이벤트 이용, replace와 정규식 활용
<html>
<input type="text"
oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
</html>oninput 은 input의 값이 변경될 때 발생한다.
oninput 이벤트 발생시 value값을 정규식과 replace 함수를 사용하여 바꿔준다.
복사 붙여넣기도 걸러 낼 수 있어서 가장 애용하는 방법이다.
/[^0-9.]/g 은
^ : not 역할
/g : 모든 문자열
이므로 숫자와 .(온점) 을 제외한 모든 문자열이 된다.
/(\..*)\./g, '$1' 은
\. : 소수점을 찾는다
\* : 이어지는 모든 문자열 찾는다 -> \..* 은 소수점 이후 모든 문자열을 찾는다.
\. : 그냥 하나의 소수점을 찾는다
$1 : 찾은 문자열 중 첫 번째만 남기고 모두 삭제
이므로 첫 번째 소수점 이후로 모든 소수점이 제거된다.
위에는 .(온점) 까지 허용했지만 숫자만 사용하도록 하려면
replace(/[^0-9]/g, '') 이렇게 사용하면 된다.
4. pattern 속성 활용
<form>
<input type="text" pattern="[0-9]+">
<input type='submit'>
</form>input에 패턴 속성지정하여 입력값을 검증하는 방법이다.
이 방법의 유일한 단점은 같은 form 태그 안에 submit 버튼이 없는 경우 활용하기 힘들다는 점이다.
'자바스크립트(jquery)' 카테고리의 다른 글
| javascript 파일다운로드 (0) | 2024.03.22 |
|---|---|
| 각종 정규식 체크 (0) | 2024.03.22 |
| 주민/외국인 등록번호 검사 (0) | 2024.03.22 |
| 라디오버튼 check속성 (0) | 2024.03.22 |
| 화살표함수(Arrow Function) (0) | 2024.03.21 |