Firefox自动完成在自动完成下拉框中按回车键触发文本框中的回车键。

Question

我有一个包含 "email" 等常用字段的表单。我有 JavaScript 捕获回车键（13）并提交表单，但是在使用主面板上的 defaultButton 属性时也观察到了相同的效果。

如果用户正在输入电子邮件地址，并从浏览器的内联自动完成中选择一个项目来按 ENTER，则不会将任何按键发送给 JavaScript（IE 上）。

然而，在 Firefox 中，文本框接收 ENTER 键按下事件并想要提交表单，这是不完整的。

除了禁用自动完成之外，有没有人知道如何停止这个问题？ 我无法找到一种方法来检测按键实际上是来自自动完成列表框。

我正在使用 asp.net 和 jQuery。

编辑 - 澄清一下： 在自动完成列表中按 Enter 不应提交表单。IE 的行为是正确的（这次！）。

我的事件处理程序本身很简单：

on key up (也尝试过 keypress) - if(e.which == 13) submitForm();

问题是，我不知道如何检测该 ENTER 按键实际上来自自动完成控件。

- Kir

---

这个能帮到你吗？https://dev59.com/mHVC5IYBdhLWcg3whBaj - Niklas

我认为问题源于 e 处理程序。第一条评论可以帮助你。 - Sinan AKYAZICI

你能展示一下包含回车键的 JavaScript 代码吗？不同浏览器对按键的处理方式是不同的。 - Aristos

我觉得我表达不够清楚。IE的行为是正确的。不正确的行为是在Firefox上，如果我按回车键选择自动完成条目，它也会提交表单。请查看我的编辑。 - Kir

Answer 1

在按键按下时存储字段的值，然后在按键抬起时再次检查。如果从一个按键中的字符串中有超过1个字符不同，那么可以安全地假设选择了自动完成项，并且应该忽略回车键。

唯一无法解决的情况是：当您有一个字段[e-mail]，您仅添加了最后一个字母并选择了自动完成项时，回车键会意外提交表单。

希望这至少能让我们开始。我也在努力寻找一个万无一失的解决方案。如果我找到了，我会更新的。

编辑：

忘掉上面的方法。已经解决了。如果您在按键抬起时检查回车键，并且输入字段的值在按键按下和抬起时不同，则可以假设选择了自动完成项。

var loginCurrentInput = '';

$('input').keydown(function(e) {

  loginCurrentInput = $(this).val();

}

$('input').keyup(function(e) {

  //if enter key pressed
  if(e.keyCode == 13) {

    //check for changed input value
    if($(this).val() != loginCurrentInput) {

      loginCurrentInput = $(this).val();
      return false;

    }

    $('#button').trigger('click');

  }

}

- Marcus

Answer 2

按下回车键时，您可以检查当前焦点元素是什么：

$("*:focus")

如果元素没有附加自动完成，则可以使表单提交。 请查看： 如何使用jQuery选择具有焦点的元素

- ncn corp

Answer 3

有两个（干净的）技巧可以使用：

1.) [Enter] 不会生成 input event …

2.) 带有自动完成功能的 keydown 和 keyup 是“同步”的

解决方案（我将两者结合起来）：

在 [enter] keydown 上期望一个真正的按键事件 (true_enter=true)，并在 "setTimeout" (0 延迟!) 中提交，检查它是否仍然是一个 true_enter

在 keyup 和 input 上清除 true_enter=false

解释：

使用自动完成时，keydwon 和 keyup 是同步的或者 - 当排队时 - 直接在其后面; 与 keydwon 和输入事件相同

使用 setTimeout 将您的 enter-action 放在这些事件之后。

真正的按键事件几乎永远不会那么快达到。我尝试了很多次，只有 20 分之 1 的比率。

缺点：

自动化测试会有问题。

我的coffeescript解决方案：（抱歉我的javascript不好）

        .on_key("enter", =>             # is what it sounds like
            @true_enter=true
            @defer  =>                  # setTimeout
                if @true_enter
                    #submit ...

        .on("keyup input",  =>
            @true_enter=false
        )

- halfbit