HTML 텍스트 입력은 숫자 입력만 허용

JAVASCRIPT / 글쓴이

HTML 텍스트 입력을 빠르게 설정할 수 있는 방법이 있습니까?<input type=text />숫자 키 입력(+ ‘?)만 허용합니다.



질문에 대한 답변



주의: 이것은 업데이트된 답변입니다.아래의 코멘트는, 키 코드에 문제가 있는 구버전을 나타내고 있습니다.

자바스크립트

JSFiddle에서 직접 사용해 보세요.

텍스트의 입력 값을 필터링할 수 있습니다.<input>다음과 같이setInputFilter기능(Copy+Paste, Drag+Drop, 키보드숏컷, 컨텍스트메뉴 조작, 입력 불가 키, 캐럿 위치, 다른 키보드 레이아웃, 유효성 오류 메시지 및 IE 9 이후의 모든 브라우저를 지원합니다):

// Restricts input for the given textbox to the given inputFilter function. function setInputFilter(textbox, inputFilter, errMsg) {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(e) {
if (inputFilter(this.value)) {
// Accepted value
if (["keydown","mousedown","focusout"].indexOf(e.type) >= 0){
this.classList.remove("input-error");
this.setCustomValidity("");
}
this.oldValue = this.value;
this.oldSelectionStart = this.selectionStart;
this.oldSelectionEnd = this.selectionEnd;
} else if (this.hasOwnProperty("oldValue")) {
// Rejected value - restore the previous one
this.classList.add("input-error");
this.setCustomValidity(errMsg);
this.reportValidity();
this.value = this.oldValue;
this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
} else {
// Rejected value - nothing to restore
this.value = "";
}
});
}); }

이제 를 사용할 수 있습니다.setInputFilter입력 필터 설치 기능:

setInputFilter(document.getElementById("myTextBox"), function(value) {
return /^d*.?d*$/.test(value); // Allow digits and '.' only, using a RegExp }, "Only digits and '.' are allowed");

원하는 스타일을 입력 오류 클래스에 적용합니다.다음은 제안입니다.

.input-error{
outline: 1px solid red; }

자세한 입력 필터 예는 JSFiddle 데모를 참조하십시오.또, 서버측의 검증도 실시할 필요가 있습니다.

타입 스크립트

이것은 TypeScript 버전입니다.

function setInputFilter(textbox: Element, inputFilter: (value: string) => boolean, errMsg: string): void {
["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop", "focusout"].forEach(function(event) {
textbox.addEventListener(event, function(this: (HTMLInputElement
HTMLTextAreaElement) & {oldValue: string; oldSelectionStart: number
null, oldSelectionEnd: number
null}) {
 if (inputFilter(this.value)) {

this.oldValue = this.value;

this.oldSelectionStart = this.selectionStart;

this.oldSelectionEnd = this.selectionEnd;
 } else if (Object.prototype.hasOwnProperty.call(this, 'oldValue')) {

this.value = this.oldValue;

if (this.oldSelectionStart !== null &&

this.oldSelectionEnd !== null) {

this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);

}
 } else {

this.value = "";
 }
});
}); }

j쿼리

여기에는 jQuery 버전도 있습니다.이 답을 보세요.

HTML 5

HTML 5에는 표준 솔루션이 있습니다.<input type="number">(사양 참조) 단, 브라우저 지원은 다양합니다.

  • 대부분의 브라우저는 양식을 제출할 때만 입력의 유효성을 확인하고 입력할 때는 유효성을 검사하지 않습니다.
  • 대부분의 모바일 브라우저는step,min그리고.max특성.
  • Chrome(버전 71.0.3578.98)에서도 사용자가 문자를 입력할 수 있습니다.e그리고.E현장에 투입됩니다.이 질문도 참조해 주세요.
  • Firefox(버전 64.0) 및 Edge(EdgeHTML 버전 17.17134)에서는 사용자가 필드에 텍스트를 입력할 수 있습니다.

w3schools.com에서 직접 사용해 보십시오.



이 DOM 사용

<input type='text' onkeypress='validate(event)' />

그리고 이 대본은

function validate(evt) {
var theEvent = evt
window.event;
// Handle paste
if (theEvent.type === 'paste') {
key = event.clipboardData.getData('text/plain');
} else {
// Handle key press
var key = theEvent.keyCode
theEvent.which;
key = String.fromCharCode(key);
}
var regex = /[0-9] ./;
if( !regex.test(key) ) {
theEvent.returnValue = false;
if(theEvent.preventDefault) theEvent.preventDefault();
} }


다음은 소수점 하나만을 사용할 수 있는 간단한 예입니다.

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(..*?)..*/g, '$1');" />

아래에 코멘트한 바와 같이 위의 솔루션은 선행 0을 처리하지 않습니다.특정 사용 사례에서 허용되지 않는 경우 위의 패턴에 다음과 같이 추가할 수 있습니다.

<input type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(..*?)..*/g, '$1').replace(/^0[^.]/, '0');" />

그렇게 하면 된다0.123또는.123하지만 아니다0123또는00.123.



이 문제에 대한 좋은 답을 찾기 위해 오랫동안 열심히 찾아봤는데<input type="number"그러나 그 외에는 다음 두 가지 방법이 가장 간결합니다.

<input type="text"
 onkeyup="this.value=this.value.replace(/[^d]/,'')">

삭제되기 전에 잠깐 동안 허용되지 않는 문자가 표시되는 것이 싫다면, 아래의 방법이 저의 해결책입니다.이는 모든 종류의 네비게이션과 단축키를 비활성화하지 않기 위한 추가 조건입니다.이것을 압축하는 방법을 아는 사람이 있으면 알려주세요!

<input type="text"
onkeydown="return ( event.ctrlKey
event.altKey

 (47<event.keyCode && event.keyCode<58 && event.shiftKey==false)

 (95<event.keyCode && event.keyCode<106)

(event.keyCode==8)
(event.keyCode==9)

 (event.keyCode>34 && event.keyCode<40)

 (event.keyCode==46) )">


대부분의 답변에는 주요 이벤트를 사용하는 약점이 있습니다.

대부분의 답변은 키보드 매크로, 복사+붙여넣기 및 불필요한 동작을 통해 텍스트 선택을 할 수 있는 능력을 제한합니다.또 다른 답변은 특정 jQuery 플러그인에 의존하는 것처럼 보입니다.이것은 기관총으로 파리를 죽이는 것입니다.

이 심플한 솔루션은 입력 메커니즘(키 스트로크, 복사+붙여넣기, 오른쪽 클릭 복사+붙여넣기, 음성-텍스트 변환 등)에 관계없이 플랫폼 전체에서 가장 적합합니다.텍스트 선택 키보드 매크로는 모두 사용할 수 있으며 스크립트별로 숫자가 아닌 값을 설정하는 기능도 제한됩니다.

function forceNumeric(){
var $input = $(this);
$input.val($input.val().replace(/[^d]+/g,'')); } $('body').on('propertychange input', 'input[type="number"]', forceNumeric);