Angular 5 - 防止默认() 在移动版上不起作用

Question

我有这个指令：

此指令应禁用输入type="number"键入 达到最大长度(作为输入传递(后。

因为最大长度属性不适用于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) {  //  Backspacetabdelete
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。

Answer 1

如果您在输入上实现(更改(甚至不是更好的解决方案吗？ 您仍然可以为方法传递自身并检查其值。

<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) {  //  Backspacetabdelete
return true;
} else if (this.isTextSelected(e)) {
return true;
} else if ((e.target as HTMLInputElement).value.length >= this.aigmaxlength) {
e.preventDefault();
return false;
}
}

不同之处在于，经过一些测试和谷歌搜索后，我认为发生的事情是手机的chrome网络浏览器不能很好地使用按键和按键

源：

• 按键/键控在 Chrome 移动浏览器上不起作用
• https://github.com/substance/substance/issues/982
• https://therealmofcode.com/posts/2014/03/where-is-keypress-event-chrome-android.html

最后一个链接提供了另一种解决方案，但我认为通过(更改(指令就足够了:)