Top community members
All Wiki Articles Create Wiki Article

Have you ever heard about encyclopedia for code?

What about: Wiki for Code project?

* because I've tried to share code and my solutions on different services and it was removed or I was unwelcomed
   - maybe it wasn't good place, but this one is.

if you think you have solution that can help someone, you are welcome to share this solution - Click here

jQuery - focus and blur events example

0 contributions
11 points

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>
0 contributions

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey ūüĎč
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more