使用Enter键按下事件并单击鼠标来触发提交按钮 [英] Triggering submit button with Enter keypress event and mouse click
本文介绍了使用Enter键按下事件并单击鼠标来触发提交按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我是一个初学者,正在使用做到这一点"和关注项目的路线来学习前端.
I am a total beginner and am learning front-end using a "just do it" and project-focus route.
我的网络应用在本质上将与待办事项列表类似.
我认为这是因为我对同一元素有两次"getElementById".
I assume it is because I have "getElementById" twice for the same element.
最初可以使用:
// add idea to list button
document.getElementById('btnSubmit').addEventListener("submitIdea", submitIdea);
function submitIdea() {
var ul = document.getElementsByClassName('anIdea')[0];
var enterIdea = document.getElementById('enterIdea');
var li = document.createElement('li');
li.setAttribute('class', enterIdea.value);
li.appendChild(document.createTextNode(enterIdea.value));
ul.prepend(li);
li.contentEditable = 'true';
};
但是,当我添加以下代码时,我根本无法在输入框中写任何东西:
// use enter key to submit new li item
document.getElementById("enterIdea").addEventListener('keypress', function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById('btnSubmit').click();
}
});
这些是我使用的资源:
- https://memorynotfound.com/dynamically-addremove-items-list- javascript/
- 触发在文本框中的Enter键上单击用JavaScript单击的按钮
- https://memorynotfound.com/dynamically-addremove-items-list-javascript/
- Trigger a button click with JavaScript on the Enter key in a text box
推荐答案
您的代码总体来说还可以
your code is ok in general
document.getElementById('btnSubmit').addEventListener("click", function() {
var ul = document.getElementsByClassName("anIdea")[0];
var enterIdea = document.getElementById("enterIdea");
var li = document.createElement("li");
li.setAttribute('class', enterIdea.value);
li.contentEditable = "true";
li.appendChild(document.createTextNode(enterIdea.value));
ul.prepend(li);
});
document.getElementById("enterIdea").addEventListener("keypress", function(event) {
if (event.keyCode === 13) {
document.getElementById("btnSubmit").click();
}
});
这篇关于使用Enter键按下事件并单击鼠标来触发提交按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文