单击或输入键时执行功能的有效方法

时间:2019-01-08 16:36:30

标签: javascript

我希望我的函数在按下提交按钮(已经存在)的同时执行,或者在三个输入(Id:taskInfo,dueDate,dueTime)中的任何一个中按下Enter键时执行。

我尝试过分离功能并以这种方式进行操作,但是它根本不起作用。

     function init() {

         window.notes = getLocalStorage('notes') || [];
         setNotesUi();

         // make note with form inputs by using button +reset notes+ set localStorage

         var submitElement = document.getElementById('submit');
         submitElement.addEventListener('click', function ()

在任何地方或在称为3的输入(taskInfo,dueDate,dueTime)上按Enter键时,都需要执行以下函数      就像这里一样,只需单击“提交”按钮就可以使用鼠标

 {
             var taskInfoElement = document.getElementById('taskInfo');
             var dueDateElement = document.getElementById('dueDate');
             var dueTimeElement = document.getElementById('dueTime');

             var note = {
                 taskInfo: taskInfoElement.value,
                 dueDate: dueDateElement.value,
                 dueTime: dueTimeElement.value
             };

             notes.push(note);
             setNotesUi();
             setLocalStorage('notes', notes);
         });
     }

在任何地方或在称为3的输入(taskInfo,dueDate,dueTime)上按Enter键时,都需要执行以下函数 就像这里一样,只需单击“提交”按钮就可以使用鼠标

2 个答案:

答案 0 :(得分:2)

表单已经可以处理此问题。只需添加一个提交处理程序即可。在任何文本框中输入将触发它。不需要额外的JavaScript。

document.querySelector("#myForm").addEventListener("submit", evt => {
console.log("Submit called");
evt.preventDefault();
});
<form id="myForm">
  <label for="a">A</label><input id="a"/>
  <label for="b">B</label><input id="b"/>
  <label for="c">C</label><input id="c"/>
  <button>d</button>
</form>

答案 1 :(得分:0)

定义您的功能

function submitForm ()
{
        var taskInfoElement = document.getElementById('taskInfo');
        var dueDateElement = document.getElementById('dueDate');
        var dueTimeElement = document.getElementById('dueTime');

        var note = {
            taskInfo: taskInfoElement.value,
            dueDate: dueDateElement.value,
            dueTime: dueTimeElement.value
        };

        notes.push(note);
        setNotesUi();
        setLocalStorage('notes', notes);
 } 

定义一个将在文本框按下事件中调用的函数,该事件将跟踪是否在文本框上按下Enter键。

function keyPressed(e){  
  if (!e) { var e = window.event; }
  e.preventDefault(); // sometimes useful

  // Enter is pressed
  if (e.keyCode == 13) { submitForm(); }
}

最后,您的init函数将初始化所有内容并适当地绑定这些函数。

function init() {

    window.notes = getLocalStorage('notes') || [];
    setNotesUi();

    document.getElementById('submit').addEventListener('click',submitForm);
    document.getElementById('taskInfo').addEventListener("keydown",keyPressed);  
    document.getElementById('dueDate').addEventListener("keydown",keyPressed);
    document.getElementById('dueTime').addEventListener("keydown",keyPressed);

}