实现输入框获得焦点的时候背景颜色高亮效果

需求:光标定位到输入框(获得焦点)时,输入框背景变为黄色;输入框失去焦点,恢复原有背景色。

<%@ 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():输入框获取光标焦点事件,添加高亮class
  • blur():输入框失去光标焦点事件,移除高亮class

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注