如何解决如果输入标签旁边有更多按钮,如何在按下“ 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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。