android - Chrome Android Angular Contenteditable 在修改前验证输入

Question

我有一个 Angular 4.3 应用程序，其中有一个 contenteditable

我需要先验证输入，然后它才能反射(reflect)在 UI 中(在这种情况下，最多只能输入三个字符的数字)

在桌面浏览器中，这是使用 (keydown) 事件并在无效输入时返回 false 完成的

但在移动浏览器(Android Chrome)中，keydown 和 keypress 事件都不会一致触发，而是 input事件被触发。

但使用 InputEvent我无法阻止修改无效输入的数据

示例 HTML 模板

<p contenteditable=true (keydown)="onKeyDown($event)" (input)="onInput($event)"></p>

组件代码是

public onKeyDown($event:KeyboardEvent){ // works
    if(invalidInput){
        return false;
    }
    return true;
}
public onInput($event:InputEvent){ // does'nt works
    if(invalidInput){
        $event.preventDefault();
        return false;
    }
    return true;
}

PS:有没有办法触发数字键盘输入contenteditable

Answer 1

您可以使用 input 使其工作。

HTML:

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

typescript :

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

我认为将最后一部分保留在组件中不是很整洁，因此您可以转到指令。

Working demo