javascript - 使用 jquery 插件在 html 元素上设置默认按钮

Question

我正在考虑编写一个 jquery 插件，它接受许多输入元素，例如输入元素、文本区域、选择 html 元素等，一旦在上述任何项目中按下回车键，就会触发输入按钮。因此，该按钮被设置为字段的默认按钮。这样做有什么技巧吗？

Answer 1

第一个input type="submit"/"image"/button type="submit"在表单中是“默认”提交按钮。

如果你想作为默认按钮不应该首先出现在页面上，然后用例如移动它。 float 或定位。或者，如果这不切实际，只需使用 position: absolute; left: -lots 将一个额外的虚拟提交按钮作为表单中的第一件事。使其有效地隐形。 (您可以使用 tabindex 来阻止它以正常的 Tab 键顺序出现；不要使用 display: none 或 visibility: hidden，因为在某些浏览器中会停止将按钮视为默认按钮。)捕捉默认按钮/从 form.onsubmit 提交操作事件和任何其他非默认按钮独立 onclick事件。

这是一个有点丑陋的 hack，遗憾的是 HTML 没有提供自然更改默认按钮的方法，但是在这里利用 native 浏览器行为比尝试用脚本替换它要好得多，这是比你想象的更棘手。有许多有趣的小浏览器行为会让您感到困惑。

例如，如果您决定捕获 Enter 按键，您可能会收到来自使用 IME 的用户的不需要的 Enter 事件。在 input type="button" 上输入按键或 textarea一般不应该触发提交。在 select 上输入按键可能应该，除非使用键盘导航下拉菜单(并且您无法可靠地判断何时发生)。如果表单中的非字段元素获得焦点并按下 Enter 怎么办？您不会捕捉到它，并且在某些浏览器中，这将导致表单提交，而无需您的代码干预，无论如何都会以默认按钮结束。 Shift-Enter 或 Ctrl-Enter 是否意味着在文本字段中提交？在文本区域？在复选框上输入是否选中它、提交表单或两者兼而有之？ ...

浏览器在这里有许多微妙的不同行为；你会发疯试图涵盖每一个最后的小可能性，无论你决定什么都可能违背用户的预期行为。让浏览器的正常默认表单提交代码来处理它。