HTML onblur event Attribute

Example

<input type="text" name="fname" id="fname" onblur="myFunction()">

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementById("fname");
  document.getElementById("demo").innerHTML = x.value;
}
</script>

Try this code ❯

Meaning

The onblur attribute occurs when an element loses focus, meaning that the user has moved focus to another element, typically either by clicking the mouse or by tabbing.

Standard Syntax

<element onblur="script">

Attribute Values

Value	Description
script	Specifies the script to be run on onblur.

Technical Details

Supported HTML elements:

All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

More Example

Example

<input onblur="myBlur()" onfocus="myFocus()" id="demo" type="text" placeholder="Try to focus me!" />

<script>
let x = document.getElementById("demo");

function myBlur(){
  x.style.background = "red";
}

function myFocus(){
  x.style.background = "green";
}
</script>

Try this code ❯