我有这个指令：
该指令应在达到最大长度（作为输入传递）后禁用输入type="number"上的输入。
因为maxlength属性不适用于type="number"。
export class AIGMaxLengthDirectiveCO {
constructor(private elm: ElementRef) { }
@Input('aigmaxlengthCO') aigmaxlength: number;
@HostListener('keydown', ['$event'])
handleKeyboardEvent(e: KeyboardEvent) {
if (e.keyCode === 8 || e.keyCode === 9 || e.keyCode === 46) { // Backspace\tab\delete
return true;
} else if (this.isTextSelected(e)) {
return true;
} else if ((e.target as HTMLInputElement).value.length >= this.aigmaxlength) {
e.preventDefault();
return false;
}
}
isTextSelected(e) {
if (document.getSelection().toString() !== '') {
return true;
}
const textbox = e.target as HTMLInputElement;
const startIndex = textbox.selectionStart;
const endIndex = textbox.selectionEnd;
return endIndex - startIndex > 0;
}
} <input [aigmaxlengthCO]="9" class="aig-input aig-17 input-text padding-0" type="number" formControlName="id" [ngClass]="form.get('id').invalid && (form.get('id').touched|| validations) ? 'error' : ''"/>就像在第三个if街区，你可以看到return false和preventDefault()。
我在移动Chrome上的问题就是它不会停止事件，我可以看到我进入第三个“if”块，并且应该返回false，但它不起作用。在桌面上，一切正常
我试过的事情：
keydown改为keypress。keydown改为document:keydown。如果您在输入上实现（更改）evento，这不是更好的解决方案吗？您仍然可以为自己的方法传递自己并检查其值。
<input [aigmaxlengthCO]="9" (change)="handleKeyboardEvent" class="aig-input aig-17 input-text padding-0" type="number" formControlName="id" [ngClass]="form.get('id').invalid && (form.get('id').touched|| validations) ? 'error' : ''"/>
和你的方法是一样的：
handleKeyboardEvent(e: KeyboardEvent) {
if (e.keyCode === 8 || e.keyCode === 9 || e.keyCode === 46) { // Backspace\tab\delete
return true;
} else if (this.isTextSelected(e)) {
return true;
} else if ((e.target as HTMLInputElement).value.length >= this.aigmaxlength) {
e.preventDefault();
return false;
}
}
不同之处在于我认为经过一些测试和谷歌搜索后发生的事情是，用于手机的Chrome网络浏览器无法与keypress和keydown一起使用
资源：
最后一个链接提供了另一种解决方案，但我认为传递（更改）指令就足够了:)