Is it possible to remove the focus from a text input when a page loads?

I have a site with one textfield for search however I dont want the focus to be on it when the page loads however it is the only text input on the form, is it possible to remove the focus?


Solution 1:

A jQuery solution would be something like:

$(function () {
    $('input').blur();
});

Solution 2:

use document.activeElement.blur();

example at http://jsfiddle.net/vGGdV/5/ that shows the currently focused element as well.

Keep a note though that calling blur() on the body element in IE will make the IE lose focus

Solution 3:

I would add that HTMLElement has a built-in .blur method as well.

Here's a demo using both .focus and .blur which work in similar ways.

const input = document.querySelector("#myInput");
<input id="myInput" value="Some Input">

<button type="button" onclick="input.focus()">Focus</button>
<button type="button" onclick="input.blur()">Lose focus</button>