Angular 2 KeyboardEvent для keydown не работает - PullRequest
Новая
       25

Angular 2 KeyboardEvent для keydown не работает

0 голосов
/ 17 сентября 2018

Я пытаюсь запустить событие нажатия клавиши, при котором нажатие клавиши изменяется на запятую. Если вы нажмете какое-то другое не числовое значение, оно отправит событие keydown, имитирующее запятую, и ожидаемое поведение - это ввести запятую в текстовое поле. Проблема в том, что когда он завершает второй вызов (запятый), он не записывает запятую. У кого-нибудь есть идеи по этому поводу?

Спасибо. 

<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;
  }

Некоторое обновление .. Я думаю, что смогу решить это. Вместо этого пытаюсь сделать еще одно нажатие клавиши ... Я создаю 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);
>       }
>     }   }

1 Ответ

0 голосов
/ 17 сентября 2018

Я бы рекомендовал использовать привязку вместо событий клавиатуры: 

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