用于keydown的Angular 2 KeyboardEvent不起作用

Question

我正在尝试启动一个keydown事件，将keydown更改为逗号。如果你按其他一些非数字值，它会发送一个模拟逗号的keydown事件，而expect行为就是在文本框中写一个逗号。问题是当它完成第二次调用（逗号一）时，它不会写逗号。对此有任何想法的人？

谢谢。

<input type="text" (keydown)="validate($event)" />


validate(event) {

    if (!this.validatenumeric(event)) {
      event.preventDefault();

    } else {
        if(event.key!=","){
        event.preventDefault();
        var getterCode = { get: function () { return 188 } };
        var getsourceCapabilities = { get: function () { return event.sourceCapabilities } };
        var e = new KeyboardEvent("keydown", {
          altKey: false,
          bubbles: true,
          cancelable: true,
          code: "Comma",
          composed: true,
          ctrlKey: false,
          key: ",",
          detail: 0,
          location: 0,
          metaKey: false,
          repeat: false,
          shiftKey: false,
          view: window
        });

        Object.defineProperties(e, {

          which: getterCode,
          keyCode: getterCode,
          sourceCapabilities: getsourceCapabilities
        });

            this.elementRef.nativeElement.querySelector('input').dispatchEvent(e);

          }
        }
      }


 validatenumeric(key) {
    var keycode = (key.which) ? key.which : key.keyCode;
    //comparing pressed keycodes
    if ((keycode >= 48 && keycode <= 57)) {
      // 0-9 only
      return true;
    } else if ((keycode >= 96 && keycode <= 105)) {
      // 0-9 only
       return true;
    }
    else return false;

    return false;
  }

一些更新..我想我可以解决这个问题。而是试图做另一个keydown ..我创建一个KeyUp并检查它是否是一个逗号。获取光标所在的位置并在该位置插入逗号。不知道是否有一个简单的方法可以做到:)谢谢大家

> <input type="text" (keydown)="validate($event)"
> (keyup)="validateUp($event)" />
> 
>   validateUp(event) {    let pos =
> this.elementRef.nativeElement.querySelector('input').selectionEnd;
>     if (event.key == ',' ) {
>       this.textValue = text.slice(0, pos) + event.key + text.slice(pos);
>       }   }
> 
> 
>   validateWithtDecimals(event) {
>     var text: string = this.textValue;
> 
> 
>     if (!this.validatenumeric(event, text, this.separator)) {
>       event.preventDefault();
>     }
>     else {
> 
>        if(event.key!=","){
>         event.preventDefault(); 
>       
>         var getterCode = { get: function () { return 188 } };
> 
>         var e = new KeyboardEvent("keyup", {
>           altKey: false,
>           bubbles: true,
>           cancelable: true,
>           code: "Comma",
>           composed: true,
>           ctrlKey: false,
>           key: ",",
>           detail: 0,
>           location: 0,
>           metaKey: false,
>           repeat: false,
>           shiftKey: false,
>           view: window
>         });
> 
>         Object.defineProperties(e, {
>           which: getterCode,
>           keyCode: getterCode,
>         });
> 
>         this.elementRef.nativeElement.querySelector('input').dispatchEvent(e);
>       }
>     }   }

Answer 1

我建议使用绑定而不是键盘事件：

 <input type="text" [(ngModel)]="valueToValidate" />

在component.ts中：

 private _value = '';
 get valueToValidate(): string {
     return this._value;
 }
 set valueToValidate(value: string) {
     value = value.replace('.',',');
     // your validation here
     this._value = value;
 }