使用 Enter 按键事件和鼠标单击触发提交按钮
Triggering submit button with Enter keypress event and mouse click
我是一个完全的初学者,我正在使用 "just do it" 和以项目为中心的路线学习前端。
我的 Web 应用程序基本上与待办事项列表类似。
我想这是因为我对同一个元素有两次 "getElementById"。
最初有效:
// 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/
- Trigger a button click with JavaScript on the Enter key in a text box
与其尝试 "click" 使用 javascript 按钮,只需在按下回车键时调用所需的函数即可。
document.addEventListener("keypress", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById('btnSubmit').click();
}
});
你的代码大体上没问题
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();
}
});
我是一个完全的初学者,我正在使用 "just do it" 和以项目为中心的路线学习前端。
我的 Web 应用程序基本上与待办事项列表类似。
我想这是因为我对同一个元素有两次 "getElementById"。
最初有效:
// 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/
- Trigger a button click with JavaScript on the Enter key in a text box
与其尝试 "click" 使用 javascript 按钮,只需在按下回车键时调用所需的函数即可。
document.addEventListener("keypress", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById('btnSubmit').click();
}
});
你的代码大体上没问题
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();
}
});