我正在嘗試使用螢屏鍵盤提交表單，但不知道該怎么做。本質上，當我單擊表單上的提交按鈕時，我需要能夠看到我在螢屏鍵盤上單擊的字符。
我有一個指令，其中包含用于列出事件的方法，例如onFocus onBlur. 我有一個組件，它列出了不同的鍵和滑鼠事件等keyPressed _enterPressed。
這是我的代碼和下面的stackblitz鏈接
服務.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);
}
應用組件.ts
submit() {
//submit forms
alert('submit');
}
這是代碼https://stackblitz.com/edit/onscreen-keyboard-5uxhyo?file=src/app/app.component.ts的 stackblitz 示例
當我使用螢屏鍵盤在輸入欄位中輸入字符，然后單擊提交按鈕時，我看不到輸入的字符但是如果我在計算機鍵盤上正常鍵入并單擊提交，那么我可以看到值警告。
知道如何解決這個問題嗎？
uj5u.com熱心網友回復：
您的鍵盤僅更改“element.value”。
您可以在您的osk-input.directive
constructor(@Optional()private control:NgControl,
private el: ElementRef, private keyboard: KeyboardService) {}
并在您的函式中onKey添加onBackspacethis.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>
你的分叉堆疊閃電戰
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/450226.html
標籤：javascript 有角度的 屏幕键盘