使用 keydown 短暂发生更改，然后消失答案

【问题标题】：The changes occurs briefly using keydown and then disappear使用 keydown 短暂发生更改，然后消失
【发布时间】：2020-04-28 03:57:55
【问题描述】：

我想在使用 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>");
    };
})

【问题讨论】：

标签： javascript keypress keydown

【解决方案1】：

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

我根据您的代码设置了两个工作示例。在这两者中，我继续让您的代码将正确的 li 元素而不是文本 `<li>${todo}</li>` 附加到 todoList。我还把enterTodo添加到列表后清除了。

这将使用有关您如何通过 keydown 事件侦听器获得它的代码，但它会阻止刷新。

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 的添加，而不是直接处理文本输入中的 enter 键。这还有一个额外的好处，那就是还支持单击提交按钮。

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>

【讨论】：