Ввод: избегайте потери фокуса при прикосновении к экранной клавиатуре - PullRequest
Новая
       15

Ввод: избегайте потери фокуса при прикосновении к экранной клавиатуре

0 голосов
/ 09 апреля 2019

Как состояние, у меня есть поля ввода (атм угловой материал) внутри контейнера формы (mat-form-field). Я пытаюсь использовать пользовательскую экранную клавиатуру (простая клавиатура). Однако я хочу, чтобы клавиатура открывалась, когда поле ввода было сфокусировано, и закрывалась, когда оно больше не фокусировалось: 

<mat-form-field class="full-width">
    <input matInput placeholder="input"
           type="number" formControlName="inputControl"
           #inputControl
           (focus)="showKeyboard =true"
           (blur)="showKeyboard=false"
    >
  </mat-form-field>
  <app-keyboard [style.display]="showKeyboard ? 'inline' : 'none'" 
                [inputName]="'inputControl'"
                (input)="inputControl.value=$event"></app-keyboard>

Проблема в том, что для сенсорных (или я не знаю) событий на клавиатуре, событие blur поля ввода, похоже, срабатывает, и клавиатура, таким образом, закрывается при каждом нажатии клавиши.

Я пытался вручную избежать всплытия событий focus и click для клавиатуры с (focus)="$event.stopImmediatePropagation()", но это ничего не изменило.

1 Ответ

1 голос
/ 09 апреля 2019

Я предлагаю использовать событие click для мобильных устройств. При нажатии внутри элемента ввода откройте клавиатуру, а при нажатии снаружи закройте клавиатуру. 

  @HostListener('document:click', ['$event']) clickedOutside(ev: any) {
    if (this.elementRef.nativeElement.contains(ev.target)) {
      this.showKeyboard = true;
    } else {
      this.showKeyboard = false;
    }
  }

пока elementRef - ваш ввод. Надеюсь, это поможет.

...