[英]How to use enter button from keyboard as submit
I'm making a todo list using javaScript,HTML and CSS and for insert any element we have to click on submit(add) button but i want that when we press enter button from keyboard the element will insert or the submit button will press and i don't have any idea how to do that because i am new in javascript我正在使用 javaScript、HTML 和 CSS 制作待办事项列表,为了插入我们必须单击提交(添加)按钮的任何元素,但我希望当我们按下键盘上的输入按钮时,元素将插入或提交按钮将按下并我不知道该怎么做,因为我是 JavaScript 新手
Here is the Code这是代码
HTML HTML
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<input id="task"><button id="add">Add</button>
<hr>
<div id="todos"></div>
<script src="nv.js"></script>
</body>
</html>
Java Script Java脚本
function get_todos() {
var todos = new Array;
var todos_str = localStorage.getItem('todo');
if (todos_str !== null) {
todos = JSON.parse(todos_str);
}
return todos;
}
function add() {
var task = document.getElementById('task').value;
var todos = get_todos();
todos.push(task);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
function remove() {
var id = this.getAttribute('id');
var todos = get_todos();
todos.splice(id, 1);
localStorage.setItem('todo', JSON.stringify(todos));
show();
return false;
}
function show() {
var todos = get_todos();
var html = '<ul>';
for(var i=0; i<todos.length; i++) {
html += '<li>' + todos[i] + '<button class="remove" id="' + i + '">x</button></li>';
};
html += '</ul>';
document.getElementById('todos').innerHTML = html;
var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
buttons[i].addEventListener('click', remove);
};
}
document.getElementById('add').addEventListener('click', add);
show();
Thanks谢谢
You can use keydown
and trigger click when press enter key您可以使用keydown
并在按下 Enter 键时触发单击
document.addEventListener('keydown', function(e) { if (e.keyCode == 13) { document.getElementById('add').clock(); } }); function get_todos() { var todos = new Array; var todos_str = localStorage.getItem('todo'); if (todos_str !== null) { todos = JSON.parse(todos_str); } return todos; } function add() { var task = document.getElementById('task').value; var todos = get_todos(); todos.push(task); localStorage.setItem('todo', JSON.stringify(todos)); show(); return false; } function remove() { var id = this.getAttribute('id'); var todos = get_todos(); todos.splice(id, 1); localStorage.setItem('todo', JSON.stringify(todos)); show(); return false; } function show() { var todos = get_todos(); var html = '<ul>'; for(var i=0; i<todos.length; i++) { html += '<li>' + todos[i] + '<button class="remove" id="' + i + '">x</button></li>'; }; html += '</ul>'; document.getElementById('todos').innerHTML = html; var buttons = document.getElementsByClassName('remove'); for (var i=0; i < buttons.length; i++) { buttons[i].addEventListener('click', remove); }; } document.getElementById('add').addEventListener('click', add); show();
<DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> </head> <body> <input id="task"><button id="add">Add</button> <hr> <div id="todos"></div> <script src="nv.js"></script> </body> </html>
Need to add onkeypress
event to the task
input as below:-需要将onkeypress
事件添加到task
输入中,如下所示:-
HTML HTML
<input id="task" onkeypress="enterToSubmit(event)">
Javascript: Javascript:
function enterToSubmit(event){
var key = event.keyCode;
if(key===13){
add();
}
}
You can execute a function whenever the user releases a button press on keyboard eg每当用户松开键盘上的按钮时,您就可以执行一个功能,例如
<input id="myInput" value="Some text..">
<script>
var input = document.getElementById("myInput");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
event.preventDefault();
document.getElementById("myBtn").click();
}
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.