需求:光标定位到输入框(获得焦点)时,输入框背景变为黄色;输入框失去焦点,恢复原有背景色。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm16.aspx.cs" Inherits="WebApplication1.WebForm16" %>
<!DOCTYPE html>
<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
<style>
.hightlight {
background-color:yellow;
}
</style>
<script type="text/javascript">
$(function () {
// 得到焦点的时候 设置背景黄色
$('input').focus(function () {
$(this).addClass('hightlight');
});
//失去焦点的时候 移除hightlight样式
$('input').blur(function () {
$(this).removeClass('hightlight');
});
});
</script>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
</body>
</html>
Code language: HTML, XML (xml)
说明:
focus():输入框获取光标焦点事件,添加高亮classblur():输入框失去光标焦点事件,移除高亮class
Previous: CSS样式相关的操作和开关灯效果
Next: 属性过滤选择器