2

He hecho una página y quiero que al pulsar la tecla ENTER lea la palabra que se ha escrito, pero no se como hacerlo. ¿Alguien tiene alguna solución o idea?.

<body>
   <h1>Title</h1>
   <input type="text" id="guess-input" >
   <button id="guess-button">Try</button>
   <div id='grid'> </div>
   <p id="guesses">
</body>

2 respuestas 2

3

Asumiré que aún no conoces sobre los eventos y cómo capturar las teclas que presionamos.


Podemos hacer lo siguiente:

  • Capturar a tu elemento input.
  • Detectar al evento que ocurre en el input.
  • Cuando escuchamos al evento, detectar si se presionó la tecla ENTER.
  • Y cuando detectamos que se presionó, capturamos al valor del input.

Entonces, primero necesitamos saber qué son los eventos y cómo detectarlos.


Los eventos y listeners

Los eventos, son como unas notificaciones que hace el código, como decir que indica de que ocurrió algo en dicho elemento. Estos eventos lo podemos detectar con el método addEventListener().

Como dice su documentación:

addEventListener() Registra un evento a un objeto en específico. El Objeto especifico (en-US) puede ser un simple elemento en un archivo, el mismo documento , una ventana o un XMLHttpRequest. Para registrar más de un eventListener, puedes llamar addEventListener() para el mismo elemento pero con diferentes tipos de eventos o parámetros de captura.

Es decir, con addEventListener() podemos escuchar los eventos que ocurre en cierto elemento, y una vez ocurra, se ejecutan dichas instrucciones.


Entonces, una vez entendemos esto, primero vamos a capturar a tus dos elementos, que son el input y tu botón:

let input = document.getElementById("guess-input"); // capturo al input
let button = document.getElementById("guess-button"); // capturo al botón

Tu elemento input está almacenado en la variable input, y el botón, en la variable botón.


Y ahora, vamos a agregarles los eventos.

Tu input, necesita ser escuchado cuando presionemos una tecla, que en este caso, es el ENTER, entonces, necesitaremos a keydown:

input.addEventListener("keydown", function() {
  //...
});

Aquí básicamente indico que cuando haga el evento keydown en el input, es decir, cuando presione una tecla, llame al listener y ejecute la función de adentro.


Detectar las teclas que presionamos

Entonces, lo que necesitamos es capturar a la tecla ENTER, de la siguiente forma:

input.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log(input.value);
  }
});

Aquí paso como parámetro event a la función, ya que nos vamos a apoyar del evento que ocurre en el input. Posteriormente, indico que si la tecla que presioné es ENTER, cumplo con la condición if y capturo el valor del input (con input.value).


Y por último, con tu botón, hacemos lo siguiente:

button.addEventListener("click", function() {
  console.log(input.value);
});

Que de seguro, ahora se te hará más fácil entender. Indico que si hacemos clic en el botón, llamo al listener y ejecuto la función de adentro, que hace lo mismo, capturar al valor del input con input.value.


Código completo:

let input = document.getElementById("guess-input");
let button = document.getElementById("guess-button");

input.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    console.log(input.value);
  }
});

button.addEventListener("click", function() {
  console.log(input.value);
});
<body>
  <h1>Title</h1>
  <input type="text" id="guess-input" >
  <button id="guess-button">Try</button>
  <div id='grid'> </div>
  <p id="guesses">
</body>

0

Supongo que por las etiquetas quieres que lo haga en Javascript, para eso necesitas usar alguno de los eventos de teclas.

  1. Keyup - Tecla ha sido presionada y soltada (lo que hacemos al teclear)
  2. Keydown - Tecla ha sido presionada (algo así como lo que haces al usar Ctrl o Alt)
  3. Keypress - Lo mismo que keyup pero dentro del elemento que captura el evento.

Ya dependerá de lo que quieras usar, en este ejemplo usaré keypress.

let input = document.getElementById("elemento");

input.addEventListener("keypress", function (event) {
  if (event.key === "Enter") {
    const valor = elemento.value;
    console.log(valor);
  }
});

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.