html - How to make input autofocus in internet explorer?

Question

Please check out my JSFiddle

https://jsfiddle.net/WK2N3/1/

#searchbar {
float: left;
display: inline;
background: #FFFFFF;
height: 29px;
width: 660px;
border: 1px solid #bdbdbd;
margin: 55px 0px 0px 10px;
font-size : 17px;
font-family : Georgia;
font : 17px Georgia, Times, aTimes New Romana, serif;
color : #333333;
}

#searchbar:focus {
float: left;
display: inline;
background: #FFFFFF;
height: 29px;
width: 660px;
border: 1px solid #2e9afe;
margin: 55px 0px 0px 10px;
font-size : 17px;
font-family : Georgia;
font : 17px Georgia, Times, aTimes New Romana, serif;
color : #333333;
-moz-box-shadow: 0 0 2px #2e9afe;
-webkit-box-shadow: 0 0 2px#2e9afe;
box-shadow: 0 0 2px #2e9afe;
}

input:focus {
outline : none;
}

<form><input type="text" id="searchbar" autofocus="autofocus"/></form>

Answer 1

Here's a one-liner (well, one line of actual logic) that uses jQuery to make autofocus work in IE. It bails out if the focus is already set--in other words, in any HTML5-capable browser.

$(function() {
  $('[autofocus]:not(:focus)').eq(0).focus();
});

I explained how it works in my blog. And here is an updated jsFiddle that works in IE.