我正在尝试制作一个 inputNumber
指令,它将阻止输入(当值错误时不突出显示输入,但即使是输入错误值):
a) 字母和符号,仅限于[0-9]
b) 遵守 min
和 max
参数
c) 通过 greaterOrEqual
/lessOrEqual
属性与 View 中的其他此类指令相关。
这是我的input-number.directive.ts
:
import {Directive, HostListener, Input} from '@angular/core';
@Directive({
selector: '[inputNumber]'
})
export class InputNumberDirective {
@Input() min: number = 0; // will be input
@Input() max: number = 100; // will be input
@Input() greaterOrEqual: number = 23; // will be input
@Input() lessOrEqual: number = 77; // will be input
@HostListener('keypress', ['$event']) sanitizeValue(event: KeyboardEvent): boolean {
const targetVal: number = Number((<HTMLInputElement>event.target).value);
if (event.charCode >= 48 && event.charCode < 58) {
if (this.min !== null && targetVal < this.min) {
return false;
}
if (this.max !== null && targetVal > this.max) {
return false;
}
if (this.greaterOrEqual !== null && targetVal < this.greaterOrEqual) {
return false;
}
return !(this.lessOrEqual !== null && targetVal > this.lessOrEqual);
}
return false;
}
}
这一切都可以防止输入字母/符号,但是当涉及到数字限制时,用户仍然可以输入它们,我的目的是防止这种情况发生。 我在这上面找到了一些 SO 线程(例如 Don't allow typing numbers between max and min value),但它对我帮助不大。
最佳答案
这是一个指令 ( Stackblitz ) 我相信会对你的情况有所帮助,它不允许输入数字以外的其他值,但它也允许 CTRL+C、CTRL+V 以及其他有用的输入键。
import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
selector: '[NumericInput]'
})
export class NumericInput {
constructor(private el: ElementRef) { }
@Input() latestInputValue: number;
@HostListener('keydown', ['$event']) onKeyDown(event) {
let e = <KeyboardEvent> event;
if (this.latestInputValue < 0 || this.latestInputValue > 100) {
e.preventDefault();
} else if ([46, 8, 9, 27, 13, 110, 190].indexOf(e.keyCode) !== -1 ||
// Allow: Ctrl+A
(e.keyCode === 65 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+C
(e.keyCode === 67 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+V
(e.keyCode === 86 && (e.ctrlKey || e.metaKey)) ||
// Allow: Ctrl+X
(e.keyCode === 88 && (e.ctrlKey || e.metaKey)) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
}
}
HTML
<input NumericInput [latestInputValue]="someValue" [(ngModel)]="someValue" >
关于javascript - Angular 4 input[type ='number'] 防止打字超过最小值/最大值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47573779/