Estoy tratando de enviar un formulario usando un teclado en pantalla, pero no estoy seguro de cómo hacerlo. Básicamente, necesito poder ver los caracteres en los que hago clic en el teclado en pantalla cuando hago clic en el botón Enviar en mi formulario.
Tengo una directiva que tiene los métodos que uso para enumerar los eventos como onFocus onBlur . Tengo un componente que enumera los diferentes eventos de teclas y mouse como keyPressed _enterPressed etc.
Aquí está mi código y un enlace de stackblitz a continuación
servicio.ts
private _enterPressed: Subject<void>; get enterPressed() { return this._enterPressed; } fireEnterPressed() { this._enterPressed.next(); }directiva
private onEnter() { let element = this.el.nativeElement; let inputEl = element.querySelector('input'); alert("Enter"+ inputEl.value); }componente de la aplicación.ts
submit() { //submit forms alert('submit'); }Aquí hay un ejemplo de stackblitz del código https://stackblitz.com/edit/onscreen-keyboard-5uxhyo?file=src%2Fapp%2Fapp.component.ts
Cuando uso el teclado en pantalla para ingresar caracteres en los campos de entrada, y luego hago clic en el botón Enviar, no veo los caracteres que he ingresado; sin embargo, si escribo normalmente en el teclado de mi computadora y hago clic en Enviar, puedo ver los valores. alertado
¿Alguna idea de cómo puedo arreglar esto?
Su teclado solo cambia el "element.value".
Puede inyectar el "NgControl" en su osk-input.directive
constructor(@Optional()private control:NgControl, private el: ElementRef, private keyboard: KeyboardService) {} Y en sus funciones onKey y onBackspace agregue 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) ... }POR CIERTO. Su onEnterFunction debería ser algo como
private onEnter() { const ev = new KeyboardEvent('keydown',{code:"Enter",key: "Enter", keyCode: 13}) this.el.nativeElement.dispatchEvent(ev) }Entonces, puedes usar en tu .html como
<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>