如何通过按回车键执行一个函数

Question

我将会翻译以下内容：

我正在尝试创建一个事件，当按下特定键时执行一个函数。我添加了一个eventListener，它寻找keypress === 13（回车键），但是它没有起作用，并且控制台上没有错误消息。对我来说，我的eventListener似乎可以访问我的函数addItem，该函数在全局范围内。我真的无法理解为什么它不起作用。

HTML:

<div class="container w-25">
  <div class='header'>
    <input class='mt-50' type='text' id='myInput' placeholder='Add a to-do'>
    <button id='btn' type='button'>Add</button>
  </div>
  <div class='content'>
    <ul id='list'>
      <li>Clean cauldron</li>
      <li>Beat Drago</li>
      <li>Study for B.U.S.E.</li>
      <li>Win quidditch cup</li>
    </ul>
  </div>
</div>

JavaScript：

let close = document.getElementsByClassName('close');
let btn = document.getElementById('btn');
let myList = document.getElementsByTagName('li');
let myInput = document.getElementById('myInput');

for (let i = 0; i < myList.length; i++) {
    let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = 'close';
    span.appendChild(cross);
    myList[i].appendChild(span);
}



for (let i = 0; i < close.length; i++) {
    close[i].addEventListener('click', function() {
        let div = this.parentElement
        div.style.display = 'none';
    })
}

btn.addEventListener('click', addItem);

function addItem() {
    let li = document.createElement('li');
    let myInput = document.getElementById('myInput').value;
    let newText = document.createTextNode(myInput)
    li.appendChild(newText);
    if (myInput === ''){
        alert('enter a to-do please')
    }else{
        document.getElementById('list').appendChild(li);
    }

 let span = document.createElement('span');
    let cross = document.createTextNode('\u00D7');
    span.className = 'close';
    span.appendChild(cross);
    li.appendChild(span);
    let close = document.getElementsByClassName('close');
    for (let i = 0; i < close.length; i++)
    close[i].addEventListener('click', function() {
        let div = this.parentElement
        div.style.display = 'none';
});

}


btn.addEventListener('click', function() {
    document.getElementById('myInput').value= '';
});


myInput.addEventListener('keydown', function(e) {
   if (e.keycode === 13) {
       addItem();
   }; 
});

- Peyo33

Answer 1

"keyCode" 以驼峰式大小写书写。

工作示例：

document.onkeypress = function (e) {
  if (e.keyCode == 13) {
    alert("Enter pressed!");
  }
};

<h1>Hello, World!</h1>

- Telmo Trooper

---

未来，应该将打字错误的解决方案作为评论发布，并附带投票以“关闭问题”。由于打字错误对于未来读者没有帮助，因此这些问题被视为“离题”（有一个特定于打字错误的关闭原因）。 - Tyler Roper

Answer 2

你需要将e.keycode === 13改为e.keyCode === 13。

因为e.keycode的值为undefined，所以undefined === 13总是false。

- Kosonome

---

你说得对，看起来我们同时回答了。 - Telmo Trooper

将来，应该将笔误解决方案作为评论发布，并附带关闭问题的投票。由于笔误对未来读者没有帮助，因此这些问题被认为是“离题的”（有一个专门针对笔误的关闭原因）。 - Tyler Roper

Answer 3

您还可以使用事件对象的key属性：

myInput.addEventListener('keydown', function(e) {
   if (e.key === 'Enter') {
       addItem();
   }; 
})

- Clarity