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:
xxxxxxxxxx
1
// 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.
xxxxxxxxxx
1
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.
xxxxxxxxxx
1
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.
xxxxxxxxxx
1
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>