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

标签 javascript jquery plugins input

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

最佳答案

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

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

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

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

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

关于javascript - 使用 jquery 插件在 html 元素上设置默认按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4038522/

相关文章:

python-3.x - 为什么我的自定义运算符没有导入到我的 DAG (Airflow) 中?

ruby-on-rails - 插件实现 : How to call a method on an ActiveRecord?

php - 验证客户端 JavaScript 事件的最佳方法

javascript - 为什么这两个表格都是单页的?

javascript - JSDoc:将类型分配给内联变量

jQuery Mobile 表单 - 重置按钮未清除所有表单字段

javascript - 有没有办法在Javascript中设置鼠标位置?

xml - Visual Studio 2010 排序 xml/xaml 属性

javascript - 更新内容,更改 url 而不加载页面 window.history.pushState

javascript - next.js 动态导入时出现 ESLint React/display-name 错误