focusout() Method - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:focusout

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. focusout

Description

The focusout() method sets event handler for focusout event on the element or any elements inside it.

focusout() method triggers if any child elements lose focus.

Syntax 

$(selector).focusout(function);
Parameter Require Description
function Optional. function to run when the focusout event occurs

The following code shows how to set background color of a <div> element when the <div> element or any child elements loses focus:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("div").focusin(function(){
        $(this).css("background-color", "#FFFFCC");
    });// w  w  w . j a  va 2  s  .  c o  m
    $("div").focusout(function(){
        $(this).css("background-color", "#FFFFFF");
    });
});
</script>
</head>
<body>

<p>Input your name.</p>

<div style="border: 1px solid black;padding:10px;">
  First name: <input type="text"><br>
  Last name: <input type="text">
</div>

</body>
</html>

Related Tutorials