JavaScriptでEnterキーを押したときに関数を呼び出す

Question

私はaddEventListenerを使用してイベントをノードにバインドしています。 addEventListenerは、ノードにaddItemの機能を追加します。しかし、私がenterを押すと、機能は実行されていません。ここで

は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> 

一方の機能は、私はJavaScriptでこれをやりたいclick

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

で実行されますjQueryライブラリを使用しないでください。

編集： 入力欄にイベントを添付します。

Answer 1

Enterキーを押したときにadd-item要素にフォーカスがないことを賭けても構いません。代わりに、トリガーを入力フィールドに変更してみてください。

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