EN
jQuery - focus and blur events example
11
points
In this article, we would like to show you 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>