Блог

Главная - Вопросы по программированию - Как добавить ключ триггера в мой проект javascript

Как добавить ключ триггера в мой проект javascript

#javascript #html #triggers #keyboard #enter

Вопрос:

Как я могу добавить клавишу триггера к своей кнопке, когда я добавляю что-то в область ввода?

Мой код:

 let animals = [];

function add() {
  let addAnimal = document.getElementById("enter").value;
  animals.push(addAnimal);
  let openList = "<ul>";
  let text = "";
  let closeList = "</ul>"
  
  for (i = 0; i < animals.length; i  ) {
    text  = "<li>"   animals[i]   "</li>";
  }
  
  document.getElementById("demo").innerHTML = openList   text   closeList;
} 
 <input id="enter" />
<button onclick="add()">Submit</button>

Комментарии:

1. Оберните свой HTML-код в <форму>, обработайте событие <формы> submit формы и вызовите .preventDefault() его: jsfiddle.net/2bo38nvL

2. Это должно работать должным образом, если у вас есть элемент с demo идентификатором as. Что-то вроде <div id="demo" />

3. @adiga Я полагаю, что OP хочет иметь возможность нажать enter, чтобы отправить значение.

Ответ №1:

Чтобы добавить прослушиватель событий в события клавиатуры, вы можете использовать keydown событие, а затем отфильтровать события на основе кодов клавиш

Вот пример работы при нажатии клавиши enter:

 let animals = [];

function add() {
  let addAnimal = document.getElementById("enter").value;
  animals.push(addAnimal);
  let openList = "<ul>";
  let text = "";
  let closeList = "</ul>"
  
  for (i = 0; i < animals.length; i  ) {
    text  = "<li>"   animals[i]   "</li>";
  }
  
  document.getElementById("demo").innerHTML = openList   text   closeList;
}

function keyCallback(event) {
  if(event.key === "Enter") {
    add();
  }
}

addEventListener("keydown", keyCallback); 
 <input id="enter" />
<button onclick="add()">Submit</button>

<div id="demo"></div>
Метки: