jQuery的简单应用-实现文本框获取焦点时改变样式
jQuery官方网站:http://jquery.com/
功能实现:
用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现。
实现原理:
在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作。
代码示例:
说明:
$(this)表示正在操作的对象。
功能实现:
用户在输入文字时,如果能高亮显示正在输入的那个文本框的话,会更人性化些,下面就使用jQuery来实现。
实现原理:
在document加载完成后(ready),添加input的focus和blur事件,并进行增加和删除样式的操作。
代码示例:
1
<html>
2
<head><title></title>
3
<style type="text/css">
4
.redBack{
5
color:white;
6
background:red;
7
border:2px solid black;
8
}
9
</style>
10
<script language="javascript" src="jquery-1.1.4.js" type="text/javascript"></script>
11
<script language="javascript">
12
$(document).ready(function(){
13
$(\'input\').focus(function(){
14
$(this).addClass(\'redBack\');
15
//alert("hello");
16
});
17
18
$(\'input\').blur(function(){
19
$(this).removeClass(\'redBack\');
20
});
21
});
22
</script>
23
</head>
24
<body>
25
<input type="text" value="hello,shanzhu" id="myText">
26
<input type="text" value="hello,shanzhu" id="myText2">
27
<input type="text" value="hello,shanzhu" id="myText3">
28
<input type="text" value="hello,shanzhu" id="myText4">
29
<input type="text" value="hello,shanzhu" id="myText5">
30
<input type="text" value="hello,shanzhu" id="myText6">
31
</body>
32
</html>
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
说明:
$(this)表示正在操作的对象。