【问题标题】:why doesn't hitting enter when a SELECT is focused submit the form?为什么当 SELECT 集中提交表单时不按 Enter 键?
【发布时间】:2011-02-27 11:05:42
【问题描述】:

考虑以下 HTML:

<form action="">
    <input />
    <select>
        <option>A</option>
        <option>B</option>
    </select>
    <input type="submit" />
</form>

如果焦点在input(文本框)上并且我按回车键,则表单提交。

但是,如果焦点位于 select(下拉框)上并且我按 Enter 键,则什么也不会发生。

我知道我可以找到一些 JavaScript 来覆盖它,但我想知道为什么按 Enter 键不起作用?

有什么我会通过使用 JavaScript 捕获输入来破坏的(可能是下拉菜单的一些本机键盘可访问性)?

【问题讨论】:

    标签: html forms submit form-submit


    【解决方案1】:

    这只是控件的性质。 Enter 键(或鼠标单击)是进行选择的原因。在按 Enter 时提交表单会导致糟糕的用户体验,因为表单本质上是不可用的。

    我不建议通过 JavaScript 更改行为,因为默认行为是规范和每个人都会期望的。

    (想象一下,如果您在下拉列表中进行选择时提交的每个表单都会是什么样子。例如,考虑在 Amazon.com 上进行搜索。选择一个类别,然后输入搜索词。如果选择一个按 Enter 键,表单将在输入搜索词之前提交。)

    【讨论】:

    • 你不太对 - 无论如何,你可能正在发帖。现在转到亚马逊,您可以选择一个类别并通过按 Enter 进行搜索,而无需与任何其他表单元素交互。
    • 按回车键不会开始搜索,它会聚焦文本输入字段,您可以在其中输入搜索词或直接按回车键而不输入单词。
    • 这取决于您使用的浏览器。例如,回车键不会在 Firefox 中提交表单,但会在 Google Chrome 中提交。
    • 我不会 -1 这个答案,但我不认为它在回答这个问题,也不同意用户不改变任何内容的建议。对于第一个 - 回答“就是这样”不是答案:)。第二,场景、用户、用法太多了,不能简单的说会迷惑用户。
    • 有趣的是我同意这个答案,但我的期望是“没有鼠标,这些女孩从 80 年代开始就使用键盘,所以整个应用程序都应该使用键盘”
    【解决方案2】:

    选择标签很有趣。 Enter 键的唯一作用是在您单击打开的下拉菜单并使用箭头键选择一个选项后,您可以按 Enter 关闭下拉菜单。

    令我难以置信的是 W3 规范。没有说明回车键应该做什么,每个浏览器都以同样的方式做!浏览器程序员可以执行以下操作之一。

    当专注于关闭的下拉选择时输入:

    1. 打开下拉菜单,以便在查看所有选项的同时键入它。

    2. 将提交表单。

    然而每个人都决定不改变它......更令人惊讶的是,我已经设计网站 13 年了,直到今天,当我得到业务分析师的错误修复时,我才注意到这一点说他们按Enter键时无法提交表单!让我想起了Tiny Pony

    http://www.w3.org/TR/html401/interact/forms.html

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2010-10-28
      • 1970-01-01
      • 2016-07-08
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多