在表单字段中模拟enter-key并保留其他处理程序

Question

我们正试图为我们正在开发的一个与表单字段相关联的软件制定通用方法.

到目前为止这么好,但我们正在进入一个边缘案例,阻止提交一个与另一个处理程序绑在一起的表单/字段.

这是(简明的)用例:

HTML:

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

正常行为是当用户在字段中键入"foo"并按下enter键时,表单将被处理并提交给正确的"端点",该端点不一定是表单开头标记中定义的端点.可能有一些函数(来自其他地方)处理此enter事件.

不幸的是,我们无法预测该功能是什么,我们希望保持它的通用性.

在上面的HTML中,单击链接应该在表单字段上触发一个模拟浏览器/用户行为的enter事件,从而触发一些未知的处理程序.

这是我们的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'并按Enter键时,表单将被提交.但是,当我们单击链接时,我们执行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();
})

现在,您可以将事件对象传递给处理程序,如果需要,可以阻止提交,或者您可以在按键处理程序中阻止它.