如何在 IE 8-10 中使用 JavaScript 检测“输入时按下输入键单击下一步按钮”行为答案

【问题标题】：How to detect "enter-key press in input clicks next button" behavior using JavaScript in IE 8-10如何在 IE 8-10 中使用 JavaScript 检测“输入时按下输入键单击下一步按钮”行为
【发布时间】：2013-01-04 09:17:22
【问题描述】：

我正在尝试“功能检测”IE 在旁边有按钮元素的输入框中按 Enter 时的行为（当它们不在表单元素中时）。

我说的是 IE 的行为，因为没有其他人在输入聚焦时按下回车键时在下一个按钮上触发单击事件。

第一个 awnser 描述 IE 为何会这样运行的相关问题： IE bug triggers click for 2 buttons?

JS-Fiddle 我尝试通过 jQuery.Event 和 .trigger 模拟按键： http://jsfiddle.net/DbVrn/

上述 js-fiddle 在 IE 中的行为：

打开页面时，输入获得焦点，然后我们尝试模拟按下回车键。
模拟的回车键什么都不做，因此输入保持焦点和红色。
如果您在输入焦点集中时手动按 Enter，按钮将变为焦点并变为绿色。

我目前尝试检测此功能时遇到的问题是：

$("input").trigger(jQuery.Event("keypress", { which: 13 }));

实际上与输入焦点时手动按下回车键的作用不同。

我怎样才能成功模拟回车键，以便我可以对此行为进行测试？或者有其他方法可以测试这种行为吗？

编辑： 更新了标题以更清楚地说明这需要通过 javascript 进行测试，并且测试需要在 IE 8 到 10 版本中工作。除非其他人可以提供一种方法对此进行测试，我将得出结论，我需要使用用户代理嗅探来查看浏览器是否为 IE，并据此选择代码路径。

【问题讨论】：

为什么检测这一点很重要？背景是什么？
我需要检测到这一点，以便我可以添加一个事件，如果 e.which === 13 如果输入行为类似，我可以添加一个执行 e.stopPropagation() 的事件。以前用过if ($.browser.msie) { ... }，但$.browser 不再是jQuery 的一部分了..
如果它触发点击下一步按钮怎么办？除非它是一个提交按钮，但你不应该首先使用表单之外的按钮..也许我错过了什么？ :)
我正在开发一个应用程序框架和控件，并在例如使用
如果你想检查 IE 你总是可以使用window.navigator.appName

标签： javascript jquery html internet-explorer

【解决方案1】：

我看不到仅从 JavaScript 触发错误的可靠方法。您还有其他几种选择：

在 VM 中安装 IE 并使用 UI 机器人驱动测试。这需要付出很多努力，但会可靠地触发错误。
有些公司提供远程测试；他们使用 SSH 隧道访问您身边的服务器，并且可以针对许多不同版本的 IE 测试您的站点。这在技术上很容易设置，但由于公司政策、FUD 和政治的原因，可能很难实现。 Google 用于“使用多种不同浏览器的测试网站”
手动测试一次，当它工作时，编写一个测试用例来检查代码是否存在（即当 JavaScript 文件或页面源不包含某个固定字符串时测试失败）。优点：很容易设置，缺点：很容易坏
只需测试一次，然后依靠惯性（即多年来没有人会触及该代码）。

【讨论】：

感谢您的回复，但重点是在页面加载时对其进行测试并使用修复行为的代码路径，因此外部测试无济于事。我想我必须使用用户代理嗅探。
抱歉，我的印象是您想要对修复进行单元测试，而不是检测错误的存在。正如我上面所说，从 JavaScript 触发浏览器中的 UI 错误是几乎不可能的。用户代理嗅探可能是唯一的解决方案。

【解决方案2】：

无论是使用 jQuery 的触发方法还是使用本机方法，都无法以您想要的方式模拟按键。真实和模拟的按键都可以被捕获，但模拟的按键不会触发由真实按键引起的整个事件处理程序链。将这条线放在触发器上方很容易证明这一点

$("input").keypress(function(event) { alert(event.which); });

正如您所见，无论是模拟按键还是真实按键，捕获都可以正常工作，而这两种按键的处理方式显然仍然存在差异。

你对按键事件对象做什么也没关系。您可以添加一个 keyCode，IE 中真正的按键具有，但这不会改变这一点。似乎什么都不会。不幸的是，我找不到任何解释原因的文档，尽管这个问题已经存在了一段时间

http://forums.asp.net/t/1478871.aspx/1

所以在浏览器中似乎没有办法。你必须从外面做。您可以为此使用 InternetExplorerDriver 之类的东西。

我建议简单地记录哪些用户代理具有此“功能”，而不是功能检测。由于 Microsoft 通常在向后兼容性方面非常弯曲，因此他们不太可能在未来版本中更改输入字段上的 enter 按键的行为。

http://code.google.com/p/selenium/wiki/InternetExplorerDriver

模拟改变输入/文本区域字段的按键

使用 TextEvent 方法可以在某些浏览器（例如 chrome）中将文本（包括换行符）发送到输入或文本区域字段，但这在 IE 版本 10 以下的任何版本中都不起作用，如下所示小提琴：

http://jsfiddle.net/qz7kV/1/

【讨论】：

感谢您的回复。遗憾的是，我得出了同样的结论，即我需要进行用户代理嗅探。
是的，我也花了很长时间才得出这个结论。很难证明是否定的。 “做不到”，似乎是正确的答案。
顺便说一句，如果你把事件按正确的顺序排列也没关系，比如在 keydown、keypress 和 keyup 中。这根本不可能。

【解决方案3】：

似乎没有办法通过 JavaScript 测试这种行为。我已经测试了 IE 8、9 和 10，并确认它们都是这样运行的。

所以现在，我将结合来自 Javascript IE detection, why not use simple conditional comments? 和 http://tanalin.com/en/articles/ie-version-js/ 为 IE 创建一个测试，只要 IE 不删除对条件编译 cmets 的支持，它就会可靠地工作。

var ie = (/*@cc_on!@*/false && (function(){
    var div = document.createElement("div"),
        list = div.getElementsByTagName("br"),
        version = 3;
    do {
        div.innerHTML = "<!--[if gt IE " + (++version) + "]><br><![endif]-->";
    } while(list[0]);
    return (version > 4 ? version : 10);
}()));

ie 变量将是 Internet Explorer 中的浏览器版本，而在其他浏览器中将是 false。

【讨论】：