Question

我们正在努力为我们正在开发的与表单字段相关联的软件制定通用方法。

到目前为止一直很好，但我们正在进入一个边缘案例，阻止提交一个与另一个处理程序绑定的表单/字段。

这是（简明的）用例：

HTML：

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

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

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

在上面的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'并按Enter键时，表单将被提交。但是，当我们点击链接时，我们会执行焦点（），然后触发关键事件，但表单未提交。

由于处理程序未知，我们无法使用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();
})

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

Answer 2

您应该从输入和单击处理程序中分离出表单处理程序。

var formHandler = function(e) {
  // ... code to submit form ...
  console.log("form handled"); 
};

然后像这样设置keypress处理程序：

$('#field1').keypress(function (event) {
  if (event.which == 13) {
    formHandler();
  }
});

你的点击处理程序如下：

$( "#link" ).click(function() {
  formHandler();
});

Answer 3

您可以使用unbind取消绑定未知处理程序（＆＃39;提交＆＃39;）然后使用submit（），如下所示。 $（＆＃34; #link＆＃34;）。click（function（）{ $（＆＃34;＃form1中＆＃34）。解除绑定（＆＃39;提交＆＃39）。提交（）; }）;

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

3 个答案: