使用 keydown 短暂发生变化，然后消失

Question

我想在使用 keydown 按下回车键时附加一个 li。但是，当我按下回车键时，新的 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>");
    };
})

Answer 1

它几乎立即出现又消失的原因是表单在提交时自动刷新页面。这就是为什么您必须在 onSubmit 事件中使用 preventDefault 的原因。

我根据您的代码设置了两个工作示例。在这两种情况下，我继续让您的代码将正确的 li 元素而不是文本 `<li>${todo}</li>` 附加到待办事项列表。加入列表后我也把enterTodo说清楚了

这使用了关于您如何使用按键按下事件侦听器的代码，但它阻止了刷新。

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>

这使用 from 的 onSubmit 处理程序来执行对 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>

使用 keydown 短暂发生变化，然后消失

The changes occurs briefly using keydown and then disappear

javascript

keypress

keydown