使用屏幕键盘提交表单

Question

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

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

下面是我的代码和一个 stackblitz link

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

应用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>

你的forked stackblitz

使用屏幕键盘提交表单

Submit form using on screen keyboard

javascript

on-screen-keyboard

angular