Question

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

默认表单附带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

form标签需要有一个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在按Enter键时将调用提交

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

仅当用户单击表单中的“提交”按钮（或）时，才会触发Submit事件。直接调用form.submit（）方法时不会引发该事件。

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

Answer 3

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

var allow_submit = false;

并修改表单的Submit事件处理程序，以便在event.preventDefault()变量不是allow_submit的情况下调用true：

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

然后侦听keyup事件（在文本区域上），如果按下Enter键（键码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.来实现，如下所示：< / p>

window.allow_submit = true;

注意：如果要大量使用表单和textarea元素，则应将它们存储在变量中。

祝你好运。

在表单提交时触发回调

3 个答案: