[英]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.