Question

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

我需要验证输入才可以在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：有没有办法触发数字键盘以便输入具有满足感

Answer 1

您可以使用input。

<强> 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;
....

我认为保留组件中的最后一部分并不是很整洁，所以你可以转到指令。

<强> Working demo

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

1 个答案: