How to detect "enter-key press in input clicks next button" behavior using JavaScript in IE 8-10

Question

I am trying to "feature detect" IE's behavior when pressing enter in an input box that has a button element next to it (when they are not in a form element).

I'm saying IE's behavior because no one else fires a click event on the next button when pressing the enter-key while the input is focused.

Related question where the first awnser describes why IE behaves like this: IE bug triggers click for 2 buttons?

JS-Fiddle where I try to simulate the key press via jQuery.Event and .trigger: http://jsfiddle.net/DbVrn/

Behavior of said js-fiddle in IE:

• When opening the page, the input gets focus, and then we try to simulate pressing of the enter-key.
• The simulated enter-key does nothing, hence the input remains focused and red.
• If you manually press enter while the input is focused, the button will become focused and green.

The problem i have with my current attempt to detect this feature is that:

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

does not actually do the same as manually pressing the enter-key while the input is focused.

How can I successfully simulate the enter-key so that my test for this behavior is possible? Or is there another way i can test for this behavior?

Edit: Updated title to more clearly state that this needs to be tested via javascript, and that the test needs to work in IE from version 8 to 10. Unless anyone else can provide a way of testing this, I will conclude that I need to use user-agent sniffing to see if browser is IE and choose code-path based off that.

Answer 1

Neither by using jQuery's trigger method nor by using the native methods it is possible to simulate key presses in the way that you would like to. The real and simulated key presses can both be captured, but the simulated key presses do not trigger the entire chain of event handlers that are caused by a real key press. This is easily demonstrated by putting this line above your trigger

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

As you can see the capture works fine, for both simulated and real key presses, while the difference between the handling of those two key presses obviously remains.

It also does not matter what you do with your keypress event objects. You may add a keyCode, which the real keypresses in IE have, but this will not change this. It seems nothing will. Unfortunately I cannot find any documentation explaining why, though this problem has been around for a while

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

So there seems to be no way from within the browser. You would have to do it from without. You could use something like InternetExplorerDriver for that.

Instead of feature detecting I would recommend simply recording which user agents have this 'feature'. Since Microsoft is usually pretty bend on backwardscompatibility it is unlikely they will change the behavior of an enter keypress on an input field in future version.

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

Simulating key presses that change input/textarea fields

Using the TextEvent method it is possible in some browsers (e.g. chrome) to send text, including new line, to an input or textarea field, but this will not work in any version of IE up to version 10 as demonstrated by this fiddle:

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