HTML event attribute onblur








The onblur attribute is triggered when the element lost focus.

What's new in HTML5

None.

Syntax

<element onblur="script">

Supported Tags

All HTML elements, EXCEPT: 

<base>, 
<bdo>, 
<br>, 
<head>, 
<html>, 
<iframe>, 
<meta>, 
<param>, 
<script>, 
<style>, 
<title>




Browser compatibility

onblur Yes Yes Yes Yes Yes

Example

<!DOCTYPE html>
<html>
<body>
<!--   w ww .ja v  a  2s . c  o m-->
Enter your first name: <input type="text" name="fname" id="fname" onblur="myFunction()">
Enter your last name: <input type="text" name="lname" id="lname" onblur="myFunction()">

<script>
function myFunction() {
    console.log("lost focus");
}
</script>

</body>
</html>

Click to view the demo





Example 2

The following code shows how to listen to Focus Lost event for input password.

<html>
<head>
<script type="text/javascript">
  function checkRequired() {<!-- www.  j  a  v a2s  . co m-->
    document.write("value is required in field");
  }
</script>
</head>
<body>
  <form name="someForm">
    <input type="text" name="text1" /><br /> 
    <input type="password" name="text2" onblur='checkRequired();'/><br /> 
    <input type="hidden" name="text3" value="hidden value" />
    <textarea name="text4" cols=50 rows=10>The text area</textarea>
    <input type="submit" value="Submit" />
  </form>
</body>
</html>

Click to view the demo