Angular 5 - preventDefault() 无法在移动 chrome 上运行答案

【问题标题】：Angular 5 - preventDefault() not working on mobile chromeAngular 5 - preventDefault() 无法在移动 chrome 上运行
【发布时间】：2018-09-13 13:16:35
【问题描述】：

我有这个指令：

这个指令应该禁止输入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;
    }
}

      &lt;input [aigmaxlengthCO]="9" class="aig-input aig-17 input-text padding-0" type="number" formControlName="id" [ngClass]="form.get('id').invalid &amp;&amp; (form.get('id').touched|| validations) ? 'error' : ''"/&gt;

在第三个if 块中，您可以看到 return false 和 preventDefault()。

我在 mobile Chrome 上的问题只是不会停止活动，我可以看到我进入了第三个“if”块，应该返回 false，但它不起作用。在桌面上，一切正常

我尝试过的事情：

将keydown 更改为keypress。
将keydown 更改为document:keydown。

【问题讨论】：

看这里是否有帮助stackoverflow.com/questions/42011740/…
@David 感谢您的回复。但我需要角度解决方案，而不是 html 和 js。

标签： javascript angular angularjs-directive

【解决方案1】：

如果您在输入上实现（更改）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 配合使用

来源：

最后一个链接提供了另一种解决方案，但我认为传递 (change) 的指令就足够了:)

【讨论】：

感谢您提供链接，但您的解决方案不起作用。未触发更改事件（我尝试在常规组件中使用常规函数对其进行测试）。