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, âTimes New Romanâ, 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, âTimes New Romanâ, 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>

How can I make this on autofocus like it is for chrome, safari, opera and firefox for IE?

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.

Answer 2

You will have to rely on javascript to do this, since html5 autofocus is not supported in IE. There is a good blog post about it here : https://www.html5tutorial.info/html5-autofocus.php

Basically, you first check if the attribute is supported, and then use javascript to manually focus in said input using the focus() method if it is not.