Question

我有一个这样的简单形式：

<form>      
<div>Name:</div>
    <input name="firstname" id="typeTracking" type="text">
    <input value="Submit" id="submitTracking" type="submit">
</form>

一些vanilla JS代码可以检测表单的提交时间：

document.addEventListener('submit', doFancyThings);

但doFancyThings功能仅在我单击提交按钮时触发，而不是按我的键盘上的回车键。我怎么能只使用普通的javascript来监听回车键提交事件，还能触发我的doFancyThings功能？

我查看了Event reference at MDN，据我所知，提交事件仅在“按下提交按钮”时触发。但是，由于表格无疑是在输入关键媒体上提交的，所以它应该也会引发一些事件，我想。

根据submit - Event reference，“事件仅在表单元素上触发，而不是按钮或提交输入。”这听起来与之前的引用有点相反，甚至不太可以理解为什么我的监听器不会在输入键上触发。

Answer 1

如果我按下回车键

使用form

＆＃13;

document.addEventListener('submit', doFancyThings);

function doFancyThings(e) {
  console.log('Enter pressed')
  e.preventDefault()

}

＆＃13;

<form>
  <div>Name:</div>
  <input name="firstname" id="typeTracking" type="text">
  <button value="Submit" id="submitTracking" type="submit">Click</button>

</form>

＆＃13;

Answer 2

试试这个

var form = document.querySelector("form");
form.onsubmit = function(e) {
    doFancyThings();
    e.preventDefault(); // for preventing redirect
};
form.onkeydown = function(e) {
    if (e.keyCode == 13) {
        doFancyThings();
        e.preventDefault(); // for preventing redirect
    }
};

function doFancyThings() {
    alert("hmmm");
};

<form>
  <div>Name:</div>
  <input name="firstname" id="typeTracking" type="text">
  <input value="Submit" id="submitTracking" type="submit">
</form>

如果按Enter键提交表单会触发什么事件？

2 个答案: