JavaScript에서 숫자만 입력
JavaScript의 특정 메소드나 속성은 HTML input 필드가 숫자 유형 값만 사용할 수 있도록 직접 활성화하지 않습니다. 오히려 입력 상자에서 숫자 유형 값만 취하는 input 필드에 대한 속성 number가 있습니다.
숫자만 필터링하는 작업을 수행하는 또 다른 방법은 input 필드 유형을 input으로 설정하는 것인데, 이는 거의 모든 종류의 가능한 입력을 가능하게 함을 의미합니다. 이것은 영숫자 값을 계산합니다.
그러면 JavaScript 코드에 포함된 특정 조건이 숫자만 허용하도록 필터링됩니다.
keypress 이벤트로 작업하고 다음과 같은 경우 keyCode를 가져옵니다. 그리고 나중에 동기에 따라 숫자형 데이터만 검증하는 조건을 설정하겠습니다.
한 예에는 number 속성이 있고 다른 예에는 입력 필드에 대해 input 속성이 있습니다.
JavaScript에서 필드 속성 number 사용 및 keyCode에 대한 조건 설정
이 예제에는 JavaScript 코드베이스에 해당하는 입력 필드가 있습니다. 처음에는 event.keyCode 또는 event.which를 통해 keyCode를 가져옵니다.
유사하게 작동하는 이 keyCode 및 what은 브라우저마다 다릅니다. 따라서 궁극적으로 코드를 기반으로 값을 필터링합니다.
코드 펜스를 확인해보자.
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input name="someid" type="number" onkeypress="isNumberKey(event)"/>
<div>
</div>
<script>
function isNumberKey(evt){
var charCode = (evt.which) ? evt.which : evt.keyCode
if (charCode > 31 && (charCode < 48 || charCode > 57))
return false;
return true;
}
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
출력:
보시다시피 a=65, b=66 및 c=67을 눌렀지만 해당 값이 승인되지 않았습니다. 그리고 나중에 4와 2 값이 입력 상자에 배치되었습니다.
JavaScript에서 필드 속성 input 사용 및 keyCode에 대한 조건 설정
이 세그먼트의 입력 필드에 대한 JavaScript 코드를 유사하게 설정하지만 이 속성은 input으로 설정됩니다. 기본적으로 Number 유형 속성은 숫자를 사용하고 다른 문자는 제외하지만 input 유형의 경우 백스페이스, 문자 등과 같은 다른 문자를 입력할 수 있는 권한이 있습니다.
여기에서 JavaScript 코드는 숫자만 계산할 때 유효성을 검사합니다.
코드 조각:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<input type="input" id="edit1" size="11" maxlength="10" />
<div>
</div>
<script>
$(document).ready(function(){
$('[id^=edit]').keypress(validateNumber);
});
function validateNumber(event) {
var key = window.event ? event.keyCode : event.which;
if (event.keyCode === 8 || event.keyCode === 46) {
return true;
} else if ( key < 48 || key > 57 ) {
return false;
} else {
return true;
}
};
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
출력:
