繁体   English   中英

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

[英]How to get input.value in JavaScript when the “Enter” key is pressed if I have more buttons next to the input tag?

这里我有一些代码。 当我按下回车键时,我正在尝试使用 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 事件侦听器,这样当用户单击输入元素,键入内容,然后按 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);
        }
    });

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM