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:
xxxxxxxxxx1
// for: <input id="my-input" type="text" />2
3
$('#my-input').focus(function() {4
console.log('focus event occurred!');5
});6
7
$('#my-input').blur(function() {8
console.log('blur event occurred!');9
});Different ways how to handle focus and blur events are presented below.
This section shows how to add events with shortcut event methods.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
div { padding: 5px; }6
label { width: 80px; display: inline-block; }7
.focus-in { background: yellow; }8
.focus-out { background: white; }9
</style>10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>11
</head>12
<body>13
<div><label>Name:</label><input type="text" /></div>14
<div><label>Addres:</label><input type="text" /></div>15
<script>16
17
$(document).ready(function() {18
var elements = $('input');19
20
elements.focus(function() {21
var element = $(this);22
element.removeClass('focus-out');23
element.addClass('focus-in');24
});25
26
elements.blur(function() {27
var element = $(this);28
element.removeClass('focus-in');29
element.addClass('focus-out');30
});31
});32
33
</script>34
</body>35
</html>This section shows how to add event with on method.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
div { padding: 5px; }6
label { width: 80px; display: inline-block; }7
.focus-in { background: yellow; }8
.focus-out { background: white; }9
</style>10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>11
</head>12
<body>13
<div><label>Name:</label><input type="text" /></div>14
<div><label>Addres:</label><input type="text" /></div>15
<script>16
17
$(document).ready(function() {18
var elements = $('input');19
20
elements.on('focus', function() {21
var element = $(this);22
element.removeClass('focus-out');23
element.addClass('focus-in');24
});25
26
elements.on('blur', function() {27
var element = $(this);28
element.removeClass('focus-in');29
element.addClass('focus-out');30
});31
});32
33
</script>34
</body>35
</html>This section shows how to add multiple events in one at once with on method.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
div { padding: 5px; }6
label { width: 80px; display: inline-block; }7
.focus-in { background: yellow; }8
.focus-out { background: white; }9
</style>10
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>11
</head>12
<body>13
<div><label>Name:</label><input type="text" /></div>14
<div><label>Addres:</label><input type="text" /></div>15
<script>16
17
$(document).ready(function() {18
var elements = $('input');19
20
elements.on({21
'focus': function() {22
var element = $(this);23
element.removeClass('focus-out');24
element.addClass('focus-in');25
},26
'blur': function() {27
var element = $(this);28
element.removeClass('focus-in');29
element.addClass('focus-out');30
}31
});32
});33
34
</script>35
</body>36
</html>