Element method blur() in Javascript

The element method blur() used to removes focus from an element. A focus can be set either by click, tab key, auto or focus() method.

Syntax

 1 element.blur()

Element method blur()

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 	<h1>The Element Object</h1>
 6 	<h2>The focus() and blur() Methods</h2>
 7 	<p>Test function by clicking button</p>
 8 
 9 	<input type="text" id="element" value="A text field">
 10 
 11 	<button type="button" onclick="callFunction(true)">Set focus</button>
 12 	<button type="button" onclick="callFunction(false)">Lose focus</button>
 13 
 14 	<script>
 15 	function callFunction(set) {
 16 	  const element = document.getElementById("element");
 17 	  set ? element.focus() : element.blur();
 18 	}
 19 	</script>
 20 </body>
 21 </html>

In the above example, a document is created with elements that includes script element. A script element has define a function that accept boolean value from the caller. If parameter value is true, it sets the focus otherwise lose the focus of an element.

Element method blur()

Related options for your search

Input type text method blur() in Javascript

Input type url method blur() in Javascript

Window object method blur() in Javascript

Element method focus() in Javascript

HTML DOM Element object in Javascript

Style property filter in Javascript

Style property opacity in Javascript

Event blur in Javascript

Event focusout in Javascript

Input type search method blur() in Javascript