Dado un documento HTML que contiene un área de texto y la tarea es activar el botón cuando el usuario presiona el botón Intro. Podemos hacerlo usando el detector de eventos «keyup», «keydown» o «keypress» en el cuadro de texto según la necesidad. Cuando se dispara este evento, verificamos si la tecla presionada es ENTER o no. Si la tecla pulsada no es ENTER , no hacemos nada. Haremos un ejemplo que agregará el contenido del cuadro de texto en div cuando se presione ENTER usando los tres detectores de eventos.
- keyup: este evento se activa cuando el usuario suelta una tecla.
Sintaxis:
textbox.addEventListner("keyup", FUNCTION);
FUNCIÓN es el nombre de la función que queremos llamar cuando se activa el evento.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>
How to trigger HTML button after hitting
enter button in textbox using JavaScript?
</title>
</head>
<body>
<label for="message">Enter Your Message:</label>
<br><br>
<!-- Textbox -->
<input type="text" id="textbox" name="message">
<br><br>
<!-- Button we want to trigger on ENTER in Textbox -->
<button id="button">GeeksForGeeks</button>
<!-- The div element in which we will
append our data from text box -->
<div id="message"></div>
<script>
var msg = document.getElementById("message");
var button = document.getElementById("button");
var textBox = document.getElementById("textbox");
// This event is fired when button is clicked
button.addEventListener("click", function () {
var str = textBox.value;
console.log(str);
msg.innerHTML += "
<p>" + str + "</p>
";
});
textBox.addEventListener("keyup", function (event) {
// Checking if key pressed is ENTER or not
// if the key pressed is ENTER
// click listener on button is called
if (event.keyCode == 13) {
button.click();
}
});
</script>
</body>
</html>
Producción:
- keydown: este evento se activa cuando el usuario presiona una tecla.
Sintaxis:
textbox.addEventListner("keydown", FUNCTION);
FUNCIÓN es el nombre de la función que queremos llamar cuando se activa el evento.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>
How to trigger HTML button after hitting
enter button in textbox using JavaScript?
</title>
</head>
<body>
<label for="message">Enter Your Message:</label>
<br><br>
<!-- Textbox -->
<input type="text" id="textbox" name="message">
<br><br>
<!-- Button we want to trigger on ENTER in Textbox -->
<button id="button">GeeksForGeeks</button>
<!-- The div element in which we will
append our data from text box -->
<div id="message"></div>
<script>
var msg = document.getElementById("message");
var button = document.getElementById("button");
var textBox = document.getElementById("textbox");
// This event is fired when button is clicked
button.addEventListener("click", function () {
var str = textBox.value;
console.log(str);
msg.innerHTML += "
<p>" + str + "</p>
";
});
textBox.addEventListener("keydown", function (event) {
// Checking if key pressed is ENTER or not
// if the key pressed is ENTER
// click listener on button is called
if (event.keyCode == 13) {
button.click();
}
});
</script>
</body>
</html>
Producción:
- pulsación de tecla: este evento se activa cuando el usuario presiona una tecla.
Sintaxis:
textbox.addEventListner("keypress", FUNCTION);
FUNCIÓN es el nombre de la función que queremos llamar cuando se activa el evento.
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>
How to trigger HTML button after hitting
enter button in textbox using JavaScript?
</title>
</head>
<body>
<label for="message">Enter Your Message:</label><br><br>
<!-- Textbox -->
<input type="text" id="textbox" name="message"><br><br>
<!-- Button we want to trigger on ENTER in Textbox -->
<button id="button">GeeksForGeeks</button>
<!-- The div element in which we will
append our data from text box -->
<div id="message"></div>
<script>
var msg = document.getElementById("message");
var button = document.getElementById("button");
var textBox = document.getElementById("textbox");
// This event is fired when button is clicked
button.addEventListener("click", function () {
var str = textBox.value;
console.log(str);
msg.innerHTML += "
<p>" + str + "</p>
";
});
textBox.addEventListener("keypress", function (event) {
// Checking if key pressed is ENTER or not
// if the key pressed is ENTER
// click listener on button is called
if (event.keyCode == 13) {
button.click();
}
});
</script>
</body>
</html>
Nota: Tanto los eventos de pulsación de tecla como de pulsación de tecla siguen repitiéndose hasta que se pulsa la tecla. Ambos pueden mostrar un resultado similar, pero la pulsación de tecla no detecta todas las teclas en todos los navegadores.
Producción: