使用屏幕键盘时，自定义 HTML 元素输入字段中的表单值不显示

Question

我正在尝试获取使用屏幕键盘输入到自定义 HTML 元素输入字段中的值以进行显示。

但是我目前得到的是空字符串。如果我使用普通的输入字段，那么它就可以正常工作。

这是我的代码片段和一个 stackblitz 示例，其中包含详细代码。

HTML

<form-input
    appOskInput
    [formStatus]="formStatus"
    [parentFormGroup]="setupForm"
    [data]="{
             formControlName: 'email',
             name: 'email'
            }">
</form-input>

<app-keyboard></app-keyboard> 

键盘指令

 private onKey(key: string) {
    let element = this.el.nativeElement;
    let inputEl = element.querySelector('input');
    let start = inputEl.selectionStart;
    let end = inputEl.selectionEnd;
    this.measure.textContent = inputEl.value.substr(0, start) + key;
    inputEl.value = inputEl.value.substr(0, start) + key + inputEl.value.substr(end);
    if (this.control)
    this.control.control.setValue(inputEl.value)
    inputEl.focus();
    inputEl.selectionStart = inputEl.selectionEnd = start + 1;
    this.updateScrollPosition();
 }

这是 stackblitz https:/ /stackblitz.com/edit/onscreen-keyboard-hlmkvv?file=src/app/app.component.ts

您将看到从普通输入字段输入时会显示这些值，但我使用我的自定义 HTML 元素输入字段时无法发生相同的情况。我已经在 HTML 页面的代码中注释掉了自定义 HTML 输入字段。有人可以帮忙吗？

Answer 1

问题：

您正在将指令添加到自定义元素&监听自定义元素而不是实际输入字段上的事件。因为，您有 @HostListener 用于 focus &指令内的模糊事件，在自定义组件的情况下这些事件不会触发。因为您的自定义组件不会触发 focus 和 blur 事件。 （如果我们希望任何自定义元素可聚焦，我们添加 tabindex=0 以使其按照网页的自然 Tab 键顺序可聚焦）。

为什么它适用于本机输入元素？

因为本机输入元素发出 focus & 模糊事件。因此，当您将该指令应用于本机输入时，您可以看到虚拟键盘。

解决方案：

您需要将事件侦听器添加到自定义组件内的本机输入字段。由于该指令是通用的，因此您可以在 OskInputDirective 内的 nativeElement 上使用 querySelector() 来访问特定的输入字段。

在OskInputDirective中，添加focus & ngAfterViewInit 中的 blur 监听器：

 ngAfterViewInit(){
    this.inputEl=this.el.nativeElement.querySelector('input');
    this.inputEl?.addEventListener('focus',this.onFocus.bind(this));
    this.inputEl?.addEventListener('blur',this.onBlur.bind(this));
  }

现在，您可以使用 this.inputEl 来引用 onKey() 中的输入元素代码>方法。

注1：在这里，我们将回调与OskInputDirective的上下文绑定。否则，this 将引用 DOM 事件。

注2：由于我们手动订阅 DOM 事件，Angular 将无法检测到更改和更改。更新您的 FormControl 值。当您更改虚拟键盘的输入值时，您需要发出一个事件。

在onKey()中，最后调用事件发射器。现在，在父级和父级中收听此事件更新相应的表单控件值：

this.inputChanged.emit(element.value);
    this.updateScrollPosition();

这是分叉的 stackblitz，其中创建了一个自定义输入元素以供参考。 https://stackblitz.com/edit/ onscreen-keyboard-na5kqr?file=src/app/app.component.ts