9

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?

Syscall
  • 19,327
  • 10
  • 37
  • 52
James
  • 1,895
  • 6
  • 27
  • 34

5 Answers5

34

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

Here is an updated jsFiddle that works in IE.

Brian Morearty
  • 2,794
  • 30
  • 35
  • What if there is (by mistake) *two* elements with the `autofocus` attribute? In compliant browsers, won't this code then find the second (unfocused) element and set the focus there instead? – xec Jan 30 '14 at 08:26
  • 3
    No, @xec, that's what the `.eq(0)` is for. Besides, if there are two `autofocus` elements then that's a bug in the page and it really doesn't matter which one gets the focus, right? – Brian Morearty Jan 31 '14 at 17:47
  • 2
    The `.eq(0)` is called after the `:not(:focus)` selector is ran, so that doesn't make a difference. I agree that it's not a big issue though, it is only a bug when the html is invalid. In any case, i believe `$('[autofocus]').focus()` should be sufficient. – xec Feb 03 '14 at 08:39
  • jsFiddle doesn't support IE. That's... inconvenient. – anevaude May 02 '19 at 19:35
  • Sorry about that. jsFiddle supported IE when I wrote the original answer. – Brian Morearty May 03 '19 at 22:40
  • And vanilla JS: `autofocusWannaBe = document.querySelector([autofocus]:not(:focus)"); if (autofocusWannaBe) autofocusWannaBe.focus();` – Hrvoje Golcic Jun 22 '20 at 08:30
3

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.

Syscall
  • 19,327
  • 10
  • 37
  • 52
Leo
  • 5,069
  • 2
  • 20
  • 27
  • As of today, 12/13/2016, the autofocus keyword works in IE 11.0.36 on Windows 10 but not on IE 11.0.35 on Windows 7.How very irritating. – Ed Pike Dec 13 '16 at 16:57
2

Usually I use jQuery:

$('input').focus()

Live example: https://jsfiddle.net/simply_simpy/eb4JJ/5/

Syscall
  • 19,327
  • 10
  • 37
  • 52
Scott Simpson
  • 3,832
  • 3
  • 27
  • 35
0

You can try this.

setTimeout(function() { document.getElementById('myInput').focus(); }, 10);

for more detail AutoFOcusIE

Singhak
  • 8,508
  • 2
  • 31
  • 34
-3

autofocus in IE is is just 

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

not 

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

See http://msdn.microsoft.com/en-us/library/windows/apps/hh441087(v=vs.85).aspx for more info.

Nick Zimmerman
  • 1,471
  • 11
  • 11
  • 4
    You're wrong. Both syntaxes work in all browsers that support `autofocus`. However, Internet Explorer supports it only from version 10. – duri Nov 26 '11 at 19:39