使用JavaScript按下回车键时调用函数

Calling a function when enter key is pressed with JavaScript

本文关键字：调用 函数 回车 JavaScript 使用      更新时间：2024-06-08

我正在使用addEventListener将事件绑定到节点。addEventListener向节点添加addItem功能。但当我按下回车键时，该功能没有运行。

这是JavaScript：

document.getElementById('add-item').addEventListener('keypress', function (e) {
    if (e.keyCode == 13) {
            addItem();
    }
}, false);
function addItem() {
    var list = document.querySelector('ul.todo-list');
    var newItem = document.getElementById('new-item-text').value;
    var newListItem = document.createElement('li');
    newListItem.className = 'todo-item';
    newListItem.innerHTML = newItem + '<span class="remove"></span>';
    list.insertBefore(newListItem, document.querySelector('.todo-new'));
    //1. Empty the Input field once the item 
    document.getElementsByTagName('input')[0].value = '';
}

这是HTML:

<li class='todo-new'>
    <input id='new-item-text' type='text'/>
    <a id='add-item' href='#'>+</a>
</li>

另一方面，该功能与click 一起运行

document.getElementById('add-item').addEventListener('click', addItem, false);

我想用JavaScript做这件事，只是不使用jQuery库。

编辑：我想将事件附加到输入字段。

我愿意打赌，当您按enter键时，add-item元素没有聚焦。相反，请尝试将触发器更改为输入字段。

document.getElementById('new-item-text').addEventListener('keypress', function (e) {
    if (e.keyCode == 13) {
            addItem();
    }
}, false);
相关文章：