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);