如何在按下 "Enter" 键时调用函数

Question

这是我的应用程序的 JSFiddle link：https://jsfiddle.net/kdowdell24/a9t7b23c/2/

document.getElementById("add-button").addEventListener("click", function() {

function createNewItem() {
    //creates div element with a class of "input-item"
    let itemContainer = document.createElement("div");
    itemContainer.classList.add("input-item");

    //creates input element and sets type attribute to "checkbox"
    let checkBoxInput = document.createElement("input");
    checkBoxInput.setAttribute("type", "checkbox");
    checkBoxInput.classList.add("check-box");

    //creates input element and sets "type" attribute to "text"
    let textInput = document.createElement("input");
    textInput.setAttribute("type", "text");

    //creates button element and sets "class" to "delete-button" and "type" to "button"
    let deleteButton = document.createElement("button");
    deleteButton.classList.add("delete-button");
    deleteButton.setAttribute("type", "button");

    //creates Font Awesome "X" icon and adds "fas" and "fa-times" classes
    let xIcon = document.createElement("i");
    xIcon.classList.add("fas");
    xIcon.classList.add("fa-times");

    //adds a div to form
    let formElement = document.getElementById("shopping-list");
    formElement.appendChild(itemContainer);

    //adds checkbox, input, and "delete-button" to div
    itemContainer.appendChild(checkBoxInput);
    itemContainer.appendChild(textInput);
    itemContainer.appendChild(deleteButton);

    //adds "X" icon to button
    deleteButton.appendChild(xIcon);

    //removes checkbox, input and deleteButton from form
    deleteButton.addEventListener("click", function() {
        checkBoxInput.remove();
        textInput.remove();
        deleteButton.remove();
        itemContainer.remove();

    });
};

createNewItem();


//Adds new item after pressing Enter key
let itemList = document.querySelectorAll("input[type=text]");
for (var i = 0; i < itemList.length; i++) {
    addEventListener("keypress", function(e) {
        if (e.key === "Enter") {
            createNewItem();
            console.log("New item created!");
        }
    })
}

});

//Removes all content from list after pressing Clear All button
document.getElementById("clear-button").addEventListener("click", function() {
let listContent = document.querySelectorAll(".input-item");
for (var i = 0; i < listContent.length; i++) {
    listContent[i].remove();
}

})

我遇到的问题是这段代码：

//Adds new item after pressing Enter key
let itemList = document.querySelectorAll("input[type=text]");
for (var i = 0; i < itemList.length; i++) {
    addEventListener("keypress", function(e) {
        if (e.key === "Enter") {
            createNewItem();
            console.log("New item created!");
        }
    })
}

发生的事情是，当我在列表项的文本框中按 Enter 时，它会添加多个条目，而不是仅添加一个条目。我想要完成的是在按 Enter 键后在当前条目下方只创建一个条目条目。

Answer 1

试试这个，注意在任何输入上回车都会触发一个新项目，因此请使用制表符进行导航

//Adds new item after pressing Enter key
function keyDownListener (e) {
  if (e.keyCode === 13) {
      e.preventDefault();
      createNewItem();
      addListeners()
      console.log("New item created!");
  }
}
function addListeners() {
  let itemList = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < itemList.length; i++) {
    try {
      itemList[i].removeEventListener("keydown", keyDownListener)
    } catch (error) {

    }
    itemList[i].addEventListener("keydown", keyDownListener)
  }
}

此外，人们建议使用 .keyCode，即 13 而不是 .key

Answer 2

如果你想在按下 ENTER 键时添加一个新的复选框，只需更改：

let itemList = document.querySelectorAll("input[type=text]");
for (var i = 0; i < itemList.length; i++) {
    addEventListener("keypress", function(e) {
        if (e.key === "Enter") {
            createNewItem();
            console.log("New item created!");
        }
    })
}

为此：

document.addEventListener("keypress", function(e) {
  if (e.key === "Enter" && (document.activeElement.tagName.toLowerCase() !== 'button')) {
    createNewItem();
    console.log("New item created!");
  }
});

我分叉了你当前的 jsFiddle 并在这里使用了上面的代码：https://jsfiddle.net/AndrewL64/3fcgpxrL/30/

感谢@Moosecouture，他提到了使用 document.activeElement 来防止在按键过程中某个元素处于焦点时进行不必要的调用。

如何在按下 "Enter" 键时调用函数

How to invoke a function on pressing the "Enter" key

javascript

for-loop

if-statement

event-listener

enter