如果输入标签旁边有更多按钮，当按下“Enter”键时如何在 JavaScript 中获取 input.value？

Question

这里有一些代码。当我按下回车键时，我正在尝试使用 JavaScript 获取 input.value。 如果我删除第一个按钮而不是它正在工作，但是如果我像这样离开代码，或者如果我将第一个按钮放在输入标记之前 - 它不起作用。

    const todoInput = document.querySelector(".todo-input");
    const submit = document.querySelector(".addBtn");
    
    submit.addEventListener("click", () => {
      console.log(todoInput.value);
    })

<div class="todo-input-container">
      <form class="input-form">
        <input
         type="text"
         class="todo-input"
         placeholder="Add task..." />
        <button class="btn flagBtn inputFlagBtn">
          <span>
            <i class="far fa-flag"></i>
          </span>
        </button>
        <button class="btn addBtn" type="submit">
          <span>
            <i class="fas fa-plus-circle"></i>
          </span>
        </button>
      </form>
    </div>

为什么只有当我从 html 中删除第一个按钮时按“Enter”键才能得到 todoInput.value？ 我需要做哪些调整才能使其同时与两个按钮一起使用？

Answer 1

如果只有一个提交按钮，在输入字段中按 Enter 只会自动提交表单。

您的标志按钮也是一个提交按钮，因为当没有type 属性时这是默认按钮。如果它不应该是提交按钮，请将type="button" 添加到它。

const todoInput = document.querySelector(".todo-input");
    const submit = document.querySelector(".addBtn");
    
    submit.addEventListener("click", () => {
      console.log(todoInput.value);
    })

<div class="todo-input-container">
      <form class="input-form">
        <input
         type="text"
         class="todo-input"
         placeholder="Add task..." />
        <button class="btn flagBtn inputFlagBtn" type="button">
          <span>
            <i class="far fa-flag"></i>
          </span>
        </button>
        <button class="btn addBtn" type="submit">
          <span>
            <i class="fas fa-plus-circle"></i>
          </span>
        </button>
      </form>
    </div>

Answer 2

您可以在 Input 字段中添加 keydown 事件监听器，这样当用户点击输入元素，输入内容，然后按 Enter 时，应该触发事件监听器。

    const todoInput = document.querySelector(".todo-input");
    const submit = document.querySelector(".addBtn");
    
    submit.addEventListener("click", () => {
      console.log(todoInput.value);
    });


   //jQuery
   $("input").on("keydown", function (e) {
        if (e.keyCode == 13) { //13 is keyCode for Enter key
            e.preventDefault(); //look this up
            console.log(todoInput.value);
        }
    });