How to detect "enter-press enter on next button click" behavior using JavaScript in IE 8-10

I am trying to "detect" IE behavior when pressing input in an input field that has a button element next to it (when they are not on a form element).

I say IE behavior because no one else fires a click event on the next button when the enter key is pressed while the input is focused.

A question related to the first insore describing why IE behaves like this: IE error triggers click for two buttons?

JS-Fiddle where I am trying to simulate a keypress via jQuery.Event and .trigger: http://jsfiddle.net/DbVrn/

Behavior of the specified js script in IE:

  • When the page is opened, the input becomes focus and then we try to simulate pressing the enter key.
  • The simulated enter key does nothing, so the input remains focused and red.
  • If you manually press the enter button when the input is focused, the button will turn focused and green.

The problem with my current attempt to detect this feature:

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

      

does not actually do the same as manually pressing the enter key while focusing the input.

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 this behavior?

Edit: Updated title to more clearly state that this needs to be tested with javascript, and that the test should work in IE from version 8 to 10. If anyone else can provide a way to test this, I'll conclude what I need to use nuance user-agent to see if the browser is IE and select a code-path based on that.

+3


source to share


3 answers


There seems to be no way to test this behavior with JavaScript. I tested IE 8, 9 and 10 and confirmed they all behave this way.

So now I'm going to combine some ideas from Detecting IE in Javascript, why not use simple conditional comments? and http://tanalin.com/en/articles/ie-version-js/ to create a test for IE that will work reliably until IE removes support for conditional compilation comments.



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);
}()));

      

The variable ie

will be the browser version in Internet Explorer and will be false

in other browsers.

+1


source


Neither jQuery's launch method nor native methods can simulate keystrokes the way you would like. Real and simulated keystrokes can be captured, but simulated keystrokes do not invoke a whole chain of event handlers caused by the real keypress. This can be easily demonstrated by placing 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 keystrokes, while the difference between handling these two keystrokes clearly remains.

It also doesn't matter what you do with the keypress event objects. You can add a keyCode that has a real keypress in IE, but that won't change that. Nothing seems to happen. Unfortunately, I can't find any documentation explaining why, although this problem has been around for a while

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

So there doesn't seem to be any way in the browser. You have to do it from the outside. You can use something like InternetExplorerDriver for this.



Instead of discovering features, I would recommend just writing down which user agents have this feature. Since Microsoft tends to be quite bent on backward compatibility, it is unlikely that they will change the behavior of pressing enter in an input field in a future version.

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

Simulate keystrokes that change input / textarea fields

Using the TextEvent method, in some browsers (like chrome) it is possible to send text, including a newline, to an input or textbox, but this will not work in any version of IE prior to version 10, as shown in the fiddle picture:

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

+1


source


I don't see a reliable way to throw an error from JavaScript alone. You have several other options:

  • Install IE in a virtual machine and use the UI robot for testing. This takes a lot of effort, but will reliably trigger an error.

  • There are companies that offer remote testing; they use SSH tunnels to access the server on your side and can test your site against many different versions of IE. It is quite easy to set up technically, but can be difficult to obtain due to company policies, FUD, and policies. Google for "test website with many different browsers"

  • Test it manually once, and when it works, write a test case that just checks for the presence of code (i.e. a test that fails when the JavaScript file or page source does not contain a specific fixed string). Pro: very easy to set up, Con: easy to break

  • Just test it once and then put it on inertia (that is, no one else will touch this code for years).

0


source







All Articles