Languages
[Edit]
EN

jQuery - focus and blur events example

11 points
Created by:
AnnLen
9220

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>
Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join