When replacing an existing <input> element using outerHTML where the new markup has <input autofocus> puts the focus on the new element instead of keeping the focus on the current form element. The markup below illustrates the issue: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function replaceLastName() { var newMarkup = "<input type='text' id='lastname' autofocus placeholder='Last name' value='Banana'>"; document.getElementById("lastname").outerHTML = newMarkup; } </script> </head> <body> <form> <input type="text" id="lastname" autofocus placeholder="Last name"> <input type="text" id="firstname" placeholder="First name" onfocus="replaceLastName();"> <input type="submit"> </form> </body> </html> When you modify the contents of field 'lastname' and switch the focus to 'firstname', Safari 8 and Webkit nightly remove the focus from the 'firstname' field and put the focus on 'lastname'. All other major browsers retain the focus on the 'firstname' field.