CODEWITHSUNDEEP
javascriptjqueryhtmlinternet-explorer
Muleskinner
Muleskinner

Reputation: 14468

Binding jQuery event handler to `focus` makes select behave strange in IE

Why does this below jQuery binding of an eventhandler to the focus event have the side-effect that the user needs to click twice on the select-option do make it drop down/up. 

$('input, select, textarea').focus(function() {
  $(this).addClass('input_highlight');
}).blur(function() {
  $(this).removeClass('input_highlight');
});

This is only an issue for IE (tested in IE8), Chrome and FF behaves as expected.

My testcase, including all relevant css, can be seen here: jsFiddle sandbox example

Upvotes: 2

Views: 1869

Answers (2)

Ryan
Ryan

Reputation: 4662

Change it to use focusin and focusout instead of focus and blur.

http://jsfiddle.net/QG22b/

Upvotes: 1

JMax
JMax

Reputation: 26591

The .focus event is activated on IE only when you click on it (and not when your mouse comes over it).

Maybe you could use the mouseover event ?

Max

Upvotes: 0

Related Questions