es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Función asincrónica para activar tanto con el botón de búsqueda como presionando la tecla “Enter” en el teclado en el campo de entrada.

Función asincrónica para activar tanto con el botón de búsqueda como presionando la tecla “Enter” en el teclado en el campo de entrada.

13 Jul, 2023 Programación

Tengo una función asíncrona que solo funciona cuando hago clic en el botón de búsqueda, pero quiero que la función también se inicie si presiono la tecla “Enter” en el teclado.

¿Es esto posible con Vanilla Javascript y una función asíncrona?

Hice varios intentos, pero parece que no está funcionando.

html

<input type="text" id="input-search" placeholder=""><span><button id="search-button">Search</button></span>

Js

let userName = document.querySelector("#username");
let button = document.querySelector("#search-button");

button.onclick = async function getData() {
  let username = document.getElementById("input-search").value;

  axios
    .get(`https://api.templatewebsite`)

    .then(async (response) => {
      let data = await response.data;
      if (response.status !== 200) {
        throw new Error(response.status);
      } else {
        console.log(data);
      }
    });
};

Intenté mantener los fragmentos de código cortos para evitar información innecesaria.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible activar la función asíncrona al presionar la tecla “enter” en el teclado. Puedes lograr esto agregando un escuchador de eventos al campo de entrada y escuchando el evento “keydown”. Aquí tienes un ejemplo de cómo puedes modificar tu código para lograr esto:

    let inputField = document.getElementById("input-search");

// Agregar un escuchador de eventos al campo de entrada para escuchar el evento "keydown"
inputField.addEventListener("keydown", async function (event) {
  // Verificar si se presionó la tecla "enter"
  if (event.keyCode === 13) {
    let username = inputField.value;

    axios
      .get(`https://api.templatewebsite`)

      .then(async (response) => {
        let data = await response.data;
        if (response.status !== 200) {
          throw new Error(response.status);
        } else {
          console.log(data);
        }
      });
  }
});

let button = document.querySelector("#search-button");

button.onclick = async function getData() {
  let username = inputField.value;

  axios
    .get(`https://api.templatewebsite`)

    .then(async (response) => {
      let data = await response.data;
      if (response.status !== 200) {
        throw new Error(response.status);
      } else {
        console.log(data);
      }
    });
};

    En este ejemplo, hemos agregado un escuchador de eventos al campo de entrada que escucha el evento “keydown”. Cuando se presiona la tecla “enter” (keyCode 13), se llama a la función asíncrona y se realiza la búsqueda. También hemos modificado la función “getData” para obtener el valor del campo de entrada directamente, en lugar de usar document.getElementById(), ya que ahora estamos almacenando el campo de entrada en una variable.

Comments are closed.