修改前，Chrome Android可编辑验证输入

我有一个

Angular 4.3

应用程序，其中我有一个

contenteditable

我需要先验证输入，然后才能将其反映到UI中（在本例中，最多只能键入三个字符的数字）

在桌面浏览器中，这是使用

（keydown）

事件完成的，并在无效输入时返回

false

但在移动浏览器（Android Chrome）中，

keydown

和

keypress

事件并没有一致地触发，而是触发事件

但使用i无法阻止修改无效输入上的数据

示例HTML模板

---

PS:有没有一种方法可以触发numberpad键盘，以便在内容可编辑的情况下进行输入

您可以使用

输入

HTML:

...
<div #myEditable contentEditable (input)="valueChanged($event.target.innerText)"></div>
...

.....
if(value.length>20){ //for example
   this.name = this.name.slice(0,20);
   this.validationError=true;
   this.myEditable.nativeElement.innerText = this.name;
....

我认为将最后一部分保留在组件中不是很整洁，所以您可以使用指令

---

谢谢您的回答，我想避免使用此解决方案，因为光标可以在任何点上移动，那么修改后进行验证将变得一团糟。您对此解决方案有何看法：您是否有使用contenteditable的限制？因为使用和会更容易。如果您感兴趣，我可以再次发布一个代码片段，谢谢，我想我只会使用这个逻辑，以及解决方案将是复杂的，但我认为会起作用

...
<div #myEditable contentEditable (input)="valueChanged($event.target.innerText)"></div>
...

.....
if(value.length>20){ //for example
   this.name = this.name.slice(0,20);
   this.validationError=true;
   this.myEditable.nativeElement.innerText = this.name;
....