Languages
[Edit]
EN

jQuery - focus and blur events example

11 points
Created by:
AnnLen
1771

In this article, we're going to have a look at how to attach focus and blur events using jQuery.

Quick overview:

// for: <input id="my-input" type="text" />

$('#my-input').focus(function() {
    console.log('focus event occurred!');
});
      
$('#my-input').blur(function() {
    console.log('blur event occurred!');
});

Different ways how to handle focus and blur events are presented below.

1. focus and blur methods example

This section shows how to add events with shortcut event methods.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    div { padding: 5px; }
    label { width: 80px; display: inline-block; }
    .focus-in { background: yellow; }
    .focus-out { background: white; }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div><label>Name:</label><input type="text" /></div>
  <div><label>Addres:</label><input type="text" /></div>
  <script>

    $(document).ready(function() {
		var elements = $('input');
      
      	elements.focus(function() {
        	var element = $(this);
          	element.removeClass('focus-out');
          	element.addClass('focus-in');
        });
      
      	elements.blur(function() {
        	var element = $(this);
          	element.removeClass('focus-in');
          	element.addClass('focus-out');
        });
    });

  </script>
</body>
</html>

2. on method with event name example

This section shows how to add event with on method.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    div { padding: 5px; }
    label { width: 80px; display: inline-block; }
    .focus-in { background: yellow; }
    .focus-out { background: white; }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div><label>Name:</label><input type="text" /></div>
  <div><label>Addres:</label><input type="text" /></div>
  <script>

    $(document).ready(function() {
		var elements = $('input');
      
      	elements.on('focus', function() {
        	var element = $(this);
          	element.removeClass('focus-out');
          	element.addClass('focus-in');
        });
      
      	elements.on('blur', function() {
        	var element = $(this);
          	element.removeClass('focus-in');
          	element.addClass('focus-out');
        });
    });

  </script>
</body>
</html>

3. on method with event object example

This section shows how to add multiple events in one at once with on method.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    div { padding: 5px; }
    label { width: 80px; display: inline-block; }
    .focus-in { background: yellow; }
    .focus-out { background: white; }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>
  <div><label>Name:</label><input type="text" /></div>
  <div><label>Addres:</label><input type="text" /></div>
  <script>
    
    $(document).ready(function() {
		var elements = $('input');
      
      	elements.on({
          	'focus': function() {
                var element = $(this);
                element.removeClass('focus-out');
                element.addClass('focus-in');
            },
            'blur': function() {
                var element = $(this);
                element.removeClass('focus-in');
                element.addClass('focus-out');
            }
        });
    });

  </script>
</body>
</html>

Checkout latest findings & news:

Checkout latest questions:

Checkout latest wiki articles:

Hey ­čĹő
Would you like to know what we do?
  • Dirask is a friendly IT community for learners, professionals and hobbyists to share their knowledge and help each other in extraordinary easy way.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Rockstar community members
Thank you for great work ­čĹŹ