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

问题描述

这里有一些代码。当我按回车键时，我试图用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？ 而我需要做哪些调整才能使其同时使用两个按钮？

解决方法

只有一个提交按钮时，在输入字段中按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>

,

您可以在Input（输入）字段上添加一个keydown事件侦听器，这样，当用户单击input元素时，键入一些内容，然后按Enter，就应该触发事件侦听器。

int