如何使用鍵盤上的輸入按鈕作為提交

Question

我正在使用 javaScript、HTML 和 CSS 制作待辦事項列表，為了插入我們必須單擊提交（添加）按鈕的任何元素，但我希望當我們按下鍵盤上的輸入按鈕時，元素將插入或提交按鈕將按下並我不知道該怎么做，因為我是 JavaScript 新手

這是代碼

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腳本

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();

謝謝

Answer 1

您可以使用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>

Answer 2

需要將onkeypress事件添加到task輸入中，如下所示：-

HTML

<input id="task" onkeypress="enterToSubmit(event)">

Javascript：

function enterToSubmit(event){
    var key = event.keyCode;
    if(key===13){
        add();
    }
}

Answer 3

每當用戶松開鍵盤上的按鈕時，您就可以執行一個功能，例如

<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>

如何使用鍵盤上的輸入按鈕作為提交

問題描述

3 個解決方案

解決方案1
0 2019-12-27 07:55:05

解決方案2
0 已采納 2019-12-27 07:57:25

解決方案3
0 2019-12-27 07:59:45

如何使用鍵盤上的輸入按鈕作為提交

問題描述

3 個解決方案

解決方案1 0 2019-12-27 07:55:05

解決方案2 0 已采納 2019-12-27 07:57:25

解決方案3 0 2019-12-27 07:59:45

解決方案1
0 2019-12-27 07:55:05

解決方案2
0 已采納 2019-12-27 07:57:25

解決方案3
0 2019-12-27 07:59:45