Изменения происходят на короткое время с помощью нажатия клавиш, а затем исчезают - PullRequest
Новая
       40

Изменения происходят на короткое время с помощью нажатия клавиш, а затем исчезают

0 голосов
/ 28 апреля 2020

Я хочу добавить li, когда клавиша ввода нажата с помощью keydown. Однако, когда я нажимаю клавишу ввода, новый li появляется на мгновение, а затем исчезает. Как я могу сохранить изменения или как исправить код? 

var submitBtn = document.querySelector("input[type = 'submit'");
var enterTodo = document.querySelector("input[type = 'text']");
var todoList = document.querySelector("#todoList");

enterTodo.addEventListener('keydown', (event)=>{
    if(event.which == 13){
        var todo = enterTodo.value;
        todoList.append("<li>" + todo + "</li>");
    };
})

1 Ответ

0 голосов
/ 28 апреля 2020

Причина, по которой он появлялся и исчезал почти сразу, заключается в том, что формы автоматически обновляют sh страницу при отправке. Вот почему вы должны использовать protectDefault в событии onSubmit.

Я настроил два рабочих примера на основе вашего кода. В обоих случаях я использовал ваш код для добавления правильных элементов li вместо текста `<li>${todo}</li>` в список todoList. После добавления в список я также дал понять, что такое enterTodo.

  1. Используется код о том, как вы работали с прослушивателем событий при нажатии клавиш, но он предотвращает обновление sh. 

var submitBtn = document.querySelector("input[type = 'submit'");
var enterTodo = document.querySelector("input[type = 'text']");
var todoList = document.querySelector("#todoList");
var form = document.querySelector("form");

form.onsubmit = (evt) => evt.preventDefault();

function addTodo() {
  var todo = enterTodo.value;
  var li = document.createElement('li');
  li.textContent = todo;
  todoList.appendChild(li);
  enterTodo.value = "";
}

enterTodo.addEventListener('keydown', (event) => {
  if (event.which == 13) {
    addTodo();
  };
})
<body>
  <form>
    <input type="text" onsubmit="" />
    <input type="submit" />
    <ul id="todoList"></ul>
  </form>
</body>
Используется обработчик onSubmit from для выполнения добавления в список todoList вместо прямой обработки клавиши ввода при вводе текста. Это также дает дополнительное преимущество, заключающееся в поддержке нажатия кнопки отправки. 

var submitBtn = document.querySelector("input[type = 'submit'");
var enterTodo = document.querySelector("input[type = 'text']");
var todoList = document.querySelector("#todoList");
var form = document.querySelector("form");

function addTodo() {
  var todo = enterTodo.value;
  var li = document.createElement('li');
  li.textContent = todo;
  todoList.appendChild(li);
  enterTodo.value='';
}

form.onsubmit = (evt) => {evt.preventDefault();
addTodo();

}
<body>
  <form>
    <input type="text" onsubmit="" />
    <input type="submit" />
    <ul id="todoList"></ul>
  </form>
</body>
...