jQuery blur method
Blur event happens when an element of HTML document loses focus by using mouse click or by using Tab key. At links (a href=””> the blur event occurs as its loses focus by using Tab key. Whereas in form fields like text boxes, text area etc. blur event occurs as Tab key is pressed out to other element or mouse is clicked somewhere else.
Syntax
$(selector).blur(function)
e.g.
$(“#txtbox”).blur(function)
$(“#link”).blur(function)
Running example of blur method
In example below blur event is captured in two elements, one is text box and other is link. To check link loosing focus (blur) use Tab key and for text box use either Tab or mouse click.
The text ahead of element will be shows as event occurs by using blur method of jQuery.
Experience this example online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$("#link1").blur(function(){
$("#linkblur").css("display","inline");
$("#txtbox").hide();
});
$("#txtblur").blur(function(){
$("#linkblur").hide();
$("#txtbox").css("display","inline");
});
});
</script>
<style>
p
{
display:none;
}
</style>
</head>
<body>
<a href="#" id="link1">tutorials collection</a>
<input type="text" id="txtblur">
<p id="linkblur">link losed focus</p>
<p id="txtbox">text box losed focus</p>
</body>
</html>
|
Leave A Comment?