本文介绍了一种使用jQuery为单行文本框添加焦点高亮效果的方法，通过简单的CSS样式和jQuery事件处理，实现了文本框获得及失去焦点时边框颜色和背景的变化。
单行文本框获取和失去焦点改变样式.
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5<title>单行文本框应用</title>
6<script language="javascript" src="jquery-1.3.1.js"></script>
7<style type="text/css">
8
* 
{ margin:0; padding:0; word-break:break-all; }
9body { background:#fff; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }
10h1, h2, h3, h4, h5, h6 { font-size:1em; }
11a { color:#2B93D2; text-decoration:none; }
12a:hover { color:#E31E1C; text-decoration:underline; }
13ul, li { list-style:none; }
14fieldset, img { border:none; }
15.focus{ border:1px solid #f00;background:#fcc;}
16</style>
17</head>
18<body>
19<form action="#" method="POST" id="regForm">
20 <fieldset>
21 <legend>个人基本信息</legend>
22 <div>
23 <label for="username">名称：</label><input type="text" id="username"/>
24 </div>
25 <div>
26 <label for="pass">密码：</label><input type="password" id="pass"/>
27 </div>
28 <div>
29 <label for="msg">详细信息：</label><textarea id="msg"></textarea>
30 </div>
31 </fieldset>
32</form>
33</body>
34</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />5
<title>单行文本框应用</title>6
<script language="javascript" src="jquery-1.3.1.js"></script>7
<style type="text/css">8
* { margin:0; padding:0; word-break:break-all; }9
body { background:#fff; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }10
h1, h2, h3, h4, h5, h6 { font-size:1em; }11
a { color:#2B93D2; text-decoration:none; }12
a:hover { color:#E31E1C; text-decoration:underline; }13
ul, li { list-style:none; }14
fieldset, img { border:none; }15
.focus{ border:1px solid #f00;background:#fcc;}16
</style>17
</head>18
<body>19
<form action="#" method="POST" id="regForm">20
<fieldset>21
<legend>个人基本信息</legend>22
<div>23
<label for="username">名称：</label><input type="text" id="username"/> 24
</div>25
<div>26
<label for="pass">密码：</label><input type="password" id="pass"/>27
</div>28
<div>29
<label for="msg">详细信息：</label><textarea id="msg"></textarea>30
</div>31
</fieldset>32
</form>33
</body>34
</html>添加jQuery事件
1$(function(){
2
$("input").focus(function(){
3
$(this).addClass("focus");
4 }).blur(function(){
5 $(this).removeClass("focus");
6
});
7
})
$(function(){2
$("input").focus(function(){3
$(this).addClass("focus");4
}).blur(function(){5
$(this).removeClass("focus");6
});7
}) 或者
1$(function(){
2 $(":input").focus(function(){
3 $(this).addClass("focus");
4 }).blur(function(){
5 $(this).removeClass("focus");
6 });
7})
$(function(){2
$(":input").focus(function(){3
$(this).addClass("focus");4
}).blur(function(){5
$(this).removeClass("focus");6
});7
}) "input"只配合<input/>元素
":input"可以匹配所有<input>,<textarea><select><button>元素
扫一扫
669
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
