Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 370
Exitos Avatar asked Nov 25 '10 11:11

Exitos


People also ask

How do you remove the focus element?

The blur() method removes focus from an element.

How do you turn off focus in HTML?

To disable focus on a specific element, set the tabIndex property on the element to a value of -1 . The tabIndex property can be used to specify that an element cannot be focused using keyboard navigation. Here is the HTML for the examples in this article. Copied!

How do I get rid of focus border?

To remove or disable focus border of browser with CSS, we select the styles for the :focus pseudo-class. to set the outline style to none to remove the border of the element that's in focus.

How do you turn off focus in react?

to set the onSubmitEditing prop to Keyboard. dismiss . As a result, when we press enter when we're focus on the text input, the focus will move away from the text input.


3 Answers

A jQuery solution would be something like:

$(function () {
    $('input').blur();
});
like image 53
Coin_op Avatar answered Sep 30 '22 23:09

Coin_op


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

like image 89
Gabriele Petrioli Avatar answered Sep 30 '22 23:09

Gabriele Petrioli


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>
like image 13
Ivan Avatar answered Oct 01 '22 00:10

Ivan