jQuery focus method
Focus event happens when an element of HTML document gets focused by using mouse click or by using Tab key. At links (a href=””> the focus event occurs as its gets focus by using Tab key. Whereas form fields like text boxes, text area etc gets focus event as mouse is clicked into element.
Syntax
$(selector).focus(function)
e.g.
$(“#txtbox”).focus(function)
$(“#link”).focus(function)
Running example of focus method
In example below focus event is captured in two elements, one is text box and other is link. To check link focus 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 focus 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").focus(function(){
$("#linkfocused").css("display","inline");
$("#txtbox").hide();
});
$("#txtfocus").focus(function(){
$("#linkfocused").hide();
$("#txtbox").css("display","inline");
});
});
</script>
<style>
p
{
display:none;
}
</style>
</head>
<body>
<a href="#" id="link1">tutorials collection</a>
<input type="text" id="txtfocus">
<p id="linkfocused">link focused</p>
<p id="txtbox">text box is focused</p>
</body>
</html>
|
Also see set focus with focus method() | jQueryblur
Leave A Comment?