使用屏幕键盘提交表单

Question

我正在尝试使用屏幕键盘提交表单，但不知道如何处理。本质上，当我单击表单上的提交按钮时，我需要能够看到在屏幕键盘中单击的字符。

我有一个指令，其中包含用于列出事件的方法，例如 onFocus onBlur。我有一个组件，列出了不同的按键和鼠标事件，例如 keyPressed _enterPressed 等。

下面的 stackblitz 链接，

这是我的代码和service.ts

private _enterPressed: Subject<void>;

get enterPressed() {
  return this._enterPressed;
}

fireEnterPressed() {
  this._enterPressed.next();
}

指令

private onEnter() {
  let element = this.el.nativeElement;
  let inputEl = element.querySelector('input');
  alert("Enter"+ inputEl.value);
}

app component.ts

submit() {
  //submit forms
  alert('submit');
}

这里是stackblitz 代码示例 https://stackblitz.com/edit/onscreen-keyboard-5uxhyo?file=src%2Fapp%2Fapp.component.ts

当我使用屏幕键盘在输入字段中输入字符时，并且然后我单击“提交”按钮，我看不到输入的字符，但是如果我在计算机键盘上正常键入并单击“提交”，那么我可以看到警报的值。

知道我该如何解决这个问题吗？

Answer 1

您的键盘仅更改“element.value”。

您可以在 osk-input.directive 中注入“NgControl”

constructor(@Optional()private control:NgControl,
            private el: ElementRef, private keyboard: KeyboardService) {}

，并在函数 onKey 和 onBackspace 中添加 this.control.control.setValue （...）

  private onKey(key: string) {
    let element = this.el.nativeElement,start = element.selectionStart,end = element.selectionEnd;

    this.measure.textContent = element.value.substr(0, start) + key;
    element.value =
      element.value.substr(0, start) + key + element.value.substr(end);

    //<--add this lines--//
    if (this.control)
       this.control.control.setValue(element.value) 
    ...
  }

  private onBackspace() {
    let element = this.el.nativeElement,start = element.selectionStart,end = element.selectionEnd;
    ...
    this.measure.textContent = element.value.substr(0, start);
    element.value = element.value.substr(0, start) + element.value.substr(end);

    //<--add this lines--//
    if (this.control)
       this.control.control.setValue(element.value) 
    ...
  }

顺便提一句。你的 onEnterFunction 应该像

  private onEnter() {
    const ev = new KeyboardEvent('keydown',{code:"Enter",key: "Enter",
    keyCode: 13})
    this.el.nativeElement.dispatchEvent(ev)
  }

这样，你可以在 .html 中使用你

<form [formGroup]="setupForm">
  <input appOskInput formControlName="email" 
        (keydown.enter)="mobile.focus()" />
  <input #mobile appOskInput formControlName="mobile" 
        (keydown.enter)="button.focus()" />
  <button #button type="button" (click)="submit()">Submit</button>
</form>

的 分叉 stackblitz