본문 바로가기
멀티캠퍼스 풀스택 과정/프론트엔드

[js] onkeydown으로 input에 숫자만 입력하기

by 이쟝 2022. 2. 10.
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>form</title>
	<script>
		function checkNumber() {
		    var key = event.keyCode;
		    event.returnValue = key>=48 && key<=57 || key>=95 || key<=105 || key==8 || key==9 || key==37 || key==39 || key==46;
		}
	</script>
</head>
<body> 
	<form>
		연락처 : <input type="text" id="tel" onkeydown ="return checkNumber()"/><br/>
	</form>
</body>
</html>
숫자(0~9) 48~57
텐키(0~9): 키보드 오른쪽 95~105
백스페이스  8
탭키  9
왼쪽방향키  37
오른쪽 방향키 39
delete 키  46
  • 영문은 입력이 안되는 데 한글은 계속 되길래 왜그런지 구글링했더니 한글은 유니코드로 구성되어 있어서 keyCode()는 유니코드를 인식하지 못한다고 했다.
function checkNumber() { // 아스키코드 숫자는 48~57 백스페이스는 8 탭키 9 왼쪽방향키 37 오른쪽방향키 39 delete 46
	var key = event.keyCode;
	if(key>=48 && key<=57 || key>=95 || key<=105 || key==8 || key==9 || key==37 || key==39 || key==46){
			event.returnValue = true;
	} else { // 숫자 외의 키를 누른 경우
			event.returnValue = false;
	}
}
  • 위의 코드와 동일하다.