javascript - 在表单字段中模拟回车键并保留其他处理程序

Question

我们正在尝试为我们正在开发的与表单字段相关联的软件开发一种通用方法。

到目前为止一切顺利，但我们遇到了一种边缘情况，该情况会阻止提交绑定(bind)了另一个处理程序的表单/字段。

这是(浓缩的)用例:

HTML:

<form id="form1">
  <input type=field id="field1"/>
</form>
<a href="#" id="link">click to submit</a>

正常行为是，当用户在字段中键入“foo”并按下回车键时，表单将被处理并提交到正确的“端点”，而这不一定是表单开始标记中定义的端点。可能有一些函数(来自其他地方)处理这个输入事件。

不幸的是，我们无法预测那个函数是什么，我们希望保持它的通用性。

在上面的 HTML 中，单击链接应该会在表单字段上触发一个输入事件，该事件会模仿浏览器/用户的行为，从而触发一些未知的处理程序。

这是我们的 Javscript(我们正在使用 jquery):

$('#field1').keypress(function (event) {
  if (event.which == 13) {
    console.log("enter pressed");
    //return false; only if needed
  }
});

$( "#link" ).click(function() {
  var e = jQuery.Event('keypress');
  e.which = 13; // #13 = Enter key
  $("#field1").focus();
  $("#field1").trigger(e);
})

当在字段中输入“foo”并按回车键时，表单将被提交。但是，当我们单击链接时，我们执行 focus() 然后触发键事件，但表单未提交。

由于处理程序未知，我们无法使用 submit()。

尝试这里的代码:http://codepen.io/conversify/pen/yOjQob

Answer 1

按下回车键时发生的事情是，如果输入在表单内，则提交表单。这是默认行为。当您模拟按键时，您应该做同样的事情，除非默认行为被阻止。

$('#field1').keypress(function (event) {
  if (event.which == 13) {
    console.log("enter pressed");
    // event.preventDefault(); if needed
  }
});

$( "#link" ).click(function() {
  var e = jQuery.Event('keypress');
  e.which = 13; // #13 = Enter key
  $("#field1").focus();
  $("#field1").trigger(e);
  var form=$("#field1").closest("form");
  if(form&&!e.isDefaultPrevented()) form.submit();
})

现在您可以将事件对象传递给处理程序，它们可以根据需要阻止提交，或者您可以在按键处理程序中阻止提交。