表单提交时触发回调

Question

我面临一个问题，我正在做的是有一个<form>有一个<textarea> 。 我想要实现的是当用户在textarea上按下Enter键时提交表单。

默认表单附加了一个eventListener submit并执行一个回调函数。

但问题是我想在Enter键上执行该回调。

我知道我可以通过使用 JQuery .submit(callback)方法来实现相同的行为。

但是有没有办法在 Vanilla javascript 中重新触发相同的回调函数。

 const submitForm = (event) => { event.preventDefault(); alert('form is submitted!'); }; // Form Event document.getElementById('form').addEventListener('submit', submitForm, false); // Key Event document.getElementById('textarea').addEventListener('keypress', (event) => { if (event.which === 13 || event.keyCode === 13) { event.preventDefault(); // Form submit } }, false);

 * { box-sizing: border-box; } textarea { width: 380px; min-height: 210px; padding: 18px; font-size: 26px; margin-bottom: 16px; resize: vertical; }

 <form id="form" name="form"> <label> <textarea id="textarea" name="message" placeholder="Type Here"></textarea> </label> </form>

Answer 1

像这样尝试：

 document.getElementById('textarea').addEventListener("keyup", function(event) { if (event.keyCode === 13) { event.preventDefault(); // do your thing here document.getElementById('form').submit(); document.getElementById('testId').innerHTML = "it works!!!!"; // test } });

 <!DOCTYPE html> <html> <body> <form id="form" name="form" action="/your_page.aspx"> <label><textarea id="textarea" name="message" placeholder="Type Here"></textarea></label> </form> <p id="testId"> </p> </body> </html>

Answer 2

表单标签需要有一个action ，否则form.submit()不会做任何事情。

<form id="form" name="form" action="/action_page.php" method="get">
    <label>
    <textarea id="textarea" name="message" placeholder="Type Here"></textarea></label>
  <input type="submit">
</form>

当按下回车时，这个 JS 将调用提交

let form = document.getElementById('form')
form.addEventListener('submit', submitForm);

document.getElementById('textarea').addEventListener('keypress', (event) => {
    if (event.which == 13 || event.keyCode == 13) {
        event.preventDefault()
        form.submit()
    }
});

但真正的问题是form.submit()不会引发onSubmit事件！ 因此，当您以编程方式提交表单时，不会调用您的eventHandler 。

来自 MDN

提交事件仅在用户单击表单中的提交按钮（或）时触发。 直接调用 form.submit() 方法时不会引发该事件。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event

Answer 3

您可以设置一个变量来确定是否允许提交表单。

var allow_submit = false;

并修改表单的提交事件处理程序，以便在allow_submit变量不为true调用event.preventDefault() ：

document.getElementsByTagName("form")[0].addEventListener("submit", function(event) {
  if (allow_submit !== true) {
    event.preventDefault();
  }
  // the form is allowed to submit, do stuff
});

然后侦听keyup事件（在 textarea 上），如果按下了 Enter 键（keycode 13 ），则将allow_submit设置为true并提交表单：

document.getElementsByTagName("textarea")[0].addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
    allow_submit = true;
    document.getElementsByTagName("form")[0].submit();
  }
  // enter key wasn't pressed, do other suff
});

注意：您可能需要将allow_submit变量设为全局变量，您可以通过将var替换为window. ，像这样：

window.allow_submit = true;

注意：如果您要大量使用它们，您应该将 form 和 textarea 元素存储在一个变量中。

祝你好运。

表单提交时触发回调

问题描述

3 个解决方案

解决方案1
0 2019-04-27 08:40:03

解决方案2
0 已采纳 2019-04-27 08:56:19

解决方案3
0 2019-04-27 09:18:51

表单提交时触发回调

问题描述

3 个解决方案

解决方案1 0 2019-04-27 08:40:03

解决方案2 0 已采纳 2019-04-27 08:56:19

解决方案3 0 2019-04-27 09:18:51

解决方案1
0 2019-04-27 08:40:03

解决方案2
0 已采纳 2019-04-27 08:56:19

解决方案3
0 2019-04-27 09:18:51