javascript - 我在 Mac 上的 Firefox 中遇到 keydown 事件和自动完成问题

Question

这让我抓狂。这很难解释，但我会试一试。

我的网站首页上有一个输入文本字段。我已经编写了一个 keydown 事件观察器，它检查 keyCode，如果它的 ENTER(或等效)，它将检查输入值(电子邮件)。如果电子邮件在数据库中有效且唯一，它将提交表单。基本的东西，或者你会这么想。

如果我在字段中输入我的电子邮件地址并按回车键，它在所有浏览器中都可以正常工作。但是，如果我键入前几个字母，然后使用箭头键从历史记录下拉框中选择电子邮件(希望你明白我的意思)，然后按回车键，结果就不同了。表单字段的值仅作为我键入的几个字母被捕获，因此验证失败。似乎当我按回车键从历史记录下拉列表中“选择”电子邮件时，浏览器会打断它，就好像我正在打字一样。

在 Chrome 和 Safari 中，它可以正常工作。正如它应该意味着当您按回车键从历史记录下拉列表中“选择”电子邮件时，它所做的只是将该电子邮件地址放入文本框中。只有在第二次按下 ENTER 键时，它才会触发事件观察器，并验证电子邮件。

希望有人能阐明为什么会发生这种情况...我的直觉是它是浏览器问题，我无法修复。

谢谢李

编辑:为了澄清我的问题，让我补充说我使用“keydown”事件来捕捉按下回车键的时刻。我已经尝试了“keyup”事件，这解决了我上面的问题，但后来我似乎无法停止自己提交表单。 “keyup”事件在默认行为之后触发，因此它不是正确的选择。

进一步编辑:

再次感谢你，顺便说一句，你的英语很好(回应你对英语不好的评论)。

我已经更改了我的事件处理程序:

$("emailInputBox").observe("keydown", function(event) {
    return submitViaEnter(event, submitSignupFormOne);
});

为此:

$("emailInputBox").observe("keydown", function(event) {
    setTimeout(submitViaEnter.curry(event, submitSignupFormOne),0);
});

提交ViaEnter:

function submitViaEnter(event, callback) {
var code = event.keyCode;
if (code == Event.KEY_RETURN) {
    event.stop();
    return callback(event);
}
return true;
}

似乎可行，但现在的问题是允许浏览器在运行 submitViaEnter 函数之前执行默认操作，这意味着当我按下 ENTER 时正在提交表单。

Answer 1

原始问题的答案

是的，这是一个 Gecko 错误(虽然不是 Mac 特有的)。

The last part of this comment包含解决方法的描述:使用超时。

[edit] 因为你要求澄清错误

当您按下 Enter 并且自动完成处于事件状态时，Firefox(错误地)首先触发页面的键处理程序，然后浏览器的内部键处理程序关闭自动完成弹出窗口并更新文本区域值，而它应该只是触发它在自动完成弹出窗口中，只让页面知道文本框值已更改。

这意味着当您的键处理程序被调用时，自动完成的处理程序尚未运行——自动完成弹出窗口仍然打开，文本框值就像自动完成发生之前一样。

当您将 setTimeout 调用添加到您的 key 处理程序时，您是在对浏览器说“嘿，在您完成 P1 待办事项列表中已经完成的事情后立即运行此功能”。所以自动完成的处理程序运行，因为它已经在待办事项列表中，然后您放置在超时上的代码运行 - 当自动完成弹出窗口已经关闭并且文本框的值已更新时。

[edit] 回答“进一步编辑”中的问题

没错。如果你想让它起作用，你需要在事件处理程序中取消默认操作，而不是在超时中:

function onKeyPress(ev) {
  if (... enter pressed ...) {
    setTimeout(function() {
      ... check the new textbox value after letting autocomplete work ...
    }, 0);
    // but cancel the default behavior (submitting the form) directly in the event listener
    ev.preventDefault();
    return false;
  }
}

如果您仍然想在 Enter 上提交表单，这将是一个更有趣的练习，但您似乎并没有这样做。