Estoy tratando de imitar el comportamiento de la tecla "Enter" en mi Código usando la tecla "Tab". Intenté usar "keydown" que imprime el archivo console.log pero no me permite ingresar nada en el campo de entrada. Aquí está mi código.
Archivo HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="test.css"> <title>Document</title> </head> <body> <div class="input"> <input id="text-area"> <button id="myBtn" onclick="selectText()" >Select Text</button> </div> <script src="test.js"></script> </body> </html>Archivo JavaScript:
let input = document.getElementById('text-area'); let button = document.getElementById('myBtn'); input.addEventListener("keyup",e=>{ e.preventDefault(); if(e.key=='Enter'){ console.log("Enter is pressed"); button.click(); } }); function selectText(){ let input1 = document.getElementById('text-area'); input1.focus(); input1.select(); }La tecla TAB es una tecla especial reservada para la navegación entre elementos HTML. Entonces, para usarlo para cualquier cosa además de la navegación, debe interceptar el evento keydown para esta tecla y llamar a preventDefault() en él.
Por ejemplo:
let input = document.getElementById('text-area'); let button = document.getElementById('myBtn'); input.addEventListener("keyup", e => { if (e.key == 'Tab') { console.log("Enter/Tab is pressed"); button.click(); } }); input.addEventListener("keydown", e => { if (e.key == 'Tab') { e.preventDefault(); } }); function selectText() { let input1 = document.getElementById('text-area'); input1.focus(); input1.select(); } <div class="input"> <input id="text-area"> <button id="myBtn" onclick="selectText()">Select Text</button> </div>Actualizar esta respuesta solo está relacionada con Angular, no con javascript
<input (keydown.tab)="selectText()">
Y olvídate de crear un eventListener keydown.enter.
Pero responda a su pregunta, puede dispathEvent . Algo como(*)
<!--see how you create a template reference variable and pass to the function--> <input #inputId (keydown.tab)="createEnterEvent(inputId)"> createEnterEvent(el: HTMLInputElement) { const event = new KeyboardEvent('keydown',{ code: "Enter", key: "Enter", keyCode: 13 }); el.dispatchEvent(event); }
Pero esto no hace un "envío" del formulario. Solo es útil si tiene un evento keydown.enter definido en su entrada
(*)NOTA sobre la variable de referencia de la plantilla. En Angular 13, cuando pasa como función, tiene el "HTMLElement", cuando usa @ViewChild , obtiene un elementRef y debe usar yourVariable.nativeElement para obtener el htmlElement