, 난 등 caracters 공백을 입력 내 입력 유형 번호를 개발 같은 문제가 있었다 ... 나는 [1- "= 태그 패턴의 해결책을 발견했다 9] ",하지만 불행히도 그것은 나를 위해 작동하지 않았다. 어떤 결과없이 검색의 와일드 후, 나는 내 자신의 기능을 개발하기로 결정했습니다. 어쨌든 자바 스크립트는 거의 유사한,이 예제에서 각 2를 사용하여 메신저, 그래서 당신은 모든 경우에이 코드를 사용할 수 있습니다 : 함수 FilterInput 여기
<input class="form-control form-control-sm" id="qte" type="number" min="1" max="30" step="1" [(ngModel)]="numberVoucher"
(keypress)="FilterInput($event)" />
됩니다 :
FilterInput(event: any) {
let numberEntered = false;
if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) { //input number entered or one of the 4 directtion up, down, left and right
//console.log('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
numberEntered = true;
}
else {
//input command entered of delete, backspace or one of the 4 directtion up, down, left and right
if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode == 46 || event.which == 8) {
//console.log('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
}
else {
//console.log('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
event.preventDefault();
}
}
// input is not impty
if (this.validForm) {
// a number was typed
if (numberEntered) {
let newNumber = parseInt(this.numberVoucher + '' + String.fromCharCode(event.which));
console.log('new number : ' + newNumber);
// checking the condition of max value
if ((newNumber <= 30 && newNumber >= 1) || Number.isNaN(newNumber)) {
console.log('valid number : ' + newNumber);
}
else {
console.log('max value will not be valid');
event.preventDefault();
}
}
// command of delete or backspace was types
if (event.keyCode == 46 || event.which == 8) {
if (this.numberVoucher >= 1 && this.numberVoucher <= 9) {
console.log('min value will not be valid');
this.numberVoucher = 1;
//event.preventDefault();
this.validForm = true;
}
}
}
// input is empty
else {
console.log('this.validForm = true');
this.validForm = false;
}
};
여기에 HTML입니다
이 함수에서는 숫자, 방향, 삭제의 키 누르기 만 입력해야했습니다.
Firefox의 경우 자바 스크립트가 없으면 불가능합니다. 여전히 필드가 작동하고 있습니다. 잘못된 것이고 임의의 비 숫자 기호를 입력하면 필드에서 유효성이 검사되지 않습니다. 예제가 필요한 경우 JS를 사용하여이를 수행하는 방법을 알려주세요. –
Mac OSX의 Firefox 39는 기본적으로 알파 문자 입력을 차단하지 않으며 파이어 폭스 42는 유효성 검사 만하지만 알파 키 입력은 비활성화하지 않습니다. 추천자 : http://caniuse.com/#feat=input-number (알려진 이슈 탭) – Venkat