Question

我正在使用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库。

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

Answer 1

当您按Enter键时，我愿意打赌add-item元素不在焦点上。相反，请尝试将触发器更改为输入字段。

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

使用JavaScript按下输入键时调用函数

1 个答案: