Как вызвать функцию при нажатии клавиши «Ввод» - PullRequest
Новая
       8

Как вызвать функцию при нажатии клавиши «Ввод»

0 голосов
/ 03 января 2019

Вот ссылка JSFiddle на мое приложение: 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.

Ответы [ 2 ]

0 голосов
/ 03 января 2019

Если вы хотите добавить новый флажок при нажатии клавиши ВВОД, просто измените это: 

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 для предотвращения нежелательных вызовов, когда элемент находится в фокусе во время нажатия клавиши.

0 голосов
/ 03 января 2019

Попробуйте, просто будьте осторожны. Ввод на ЛЮБОМ входе вызовет новый элемент, поэтому используйте вкладку для навигации 

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

...