select2 multiple 防止其他输入在输入时提交表单

Posted 2023-05-07

【中文标题】select2 multiple 防止其他输入在输入时提交表单

【英文标题】：select2 multiple prevents other input from submitting form on enter

【发布时间】：2016-05-11 14:29:51

【问题描述】：

我有一个带有简单输入和 select2 输入的表单，如下所示：http://codepen.io/anon/pen/QyBxwE

当第一个输入被聚焦时按回车应该提交表单（在这种情况下，重定向到 404 页面）。

由于某种原因，多个 select2 输入阻止了表单提交。如果我删除 select2 类或 multiple 属性，表单会正常运行。

在 Safari、Chrome 和 Firefox 上的 Mac OS X Yosemite 上进行了测试，并且在所有浏览器上始终如一。

（我使用的是 jQuery 2.1.3 和 select2 4.0.1）

【问题讨论】：

你必须检查它的事件捕获；似乎它的键盘处理有点太笨拙了。

【参考方案1】：

表单的工作原理是，当您单击 Enter 时，它会尝试执行一些默认操作。第一步是提交表格。这仅在没有其他 javascript 阻止表单提交时才有效。 Select2 multiple 通过防止默认来摆脱默认操作。这样当你开始输入并点击回车时，它不会自动提交。

解决方案是使用第二种默认选项。那就是在页面上有一个提交按钮。带有转到最近的提交按钮的表单并单击它。此操作不会被 select2 JavaScript 覆盖。

http://codepen.io/anon/pen/yeqxQJ

只需将<input type="submit"> 添加到您的表单中，它就会按照您想要的方式工作。

【讨论】：

如果你真的需要表单外的按钮？

您可以使用 css 隐藏内部按钮，不可见。不显示我相信摆脱了提交按钮的功能。然后你可以在表单元素的外面有一个<button onclick="myForm.submit()"></button>。但如果你能帮上忙，那就让表单也包含按钮。