asp.net使用jquery实现搜索框默认提示功能

所属分类: 网络编程 / ASP.NET 阅读数: 1123
收藏 0 赞 0 分享

文本框中创建默认文本提示

通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索。

当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失。

当文本框没有任何值并失去焦点,文本框内容会重新生成默认提示。

为了实现上面的需求,代码如下:

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
    <link href="Base.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .text
        {
            border: #0a8fda solid 1px;
            color: #cccccc;
            font-style:italic;
            background: #fff url(img/input.gif);
            padding: 5px;
        }
        .text-focus
        {
            border: solid 1px #f50;
            background: #fff url(img/input.gif);
            padding: 5px;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            var txtSearch = $("#<%=txtSearch.ClientID%>");

            $("#txtSearch").focus(function () {
                if (txtSearch.val() == this.title) {
                    txtSearch.val("");

                    this.className = "text-focus";
                }
            });

            $("#txtSearch").blur(function () {

                if (txtSearch.val() == "") {
                    txtSearch.val(this.title);
                    this.className = "text";
                }
            });
            txtSearch.blur();
        });

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin: 100px auto; width: 400px; height: 80px;border: solid 1px #0a8fda;">
        <p style="text-align:center;">
            <asp:TextBox ID="txtSearch" runat="server" Width="200px" class="text" ToolTip="请输入搜索的关键字"></asp:TextBox>
            <asp:Button ID="btnSearch" runat="server" Text="搜索" class="button blue" />
        </p>
    </div>
    </form>
</body>
</html>

更多精彩内容其他人还在看

ASP.NET Web API教程 创建Admin视图详细介绍

现在我们转入客户端,并添加一个能够使用从Admin控制器而来的数据的页面。通过给控制器发送AJAX请求的方式,该页面将允许用户创建、编辑,或删除产品
收藏 0 赞 0 分享

asp.net中session的原理及应用详解

Session是一种Web会话中的常用状态之一,Session提供了一种把信息保存在服务器内存中的方式。他能储存任何数据类型,包含自定义对象,本文将详细介绍asp.net中session的原理及应用,需要的朋友可以参考下
收藏 0 赞 0 分享

Web开发异常行为排查常用方法图文介绍

平常程序遇到错误,开发环境下一般都用调试搞定,生产环境下通过查看日志搞定。但也有搞不定的时候,本文提供了详细的解决方案
收藏 0 赞 0 分享

ASP.NET repeater添加序号列的方法

在项目开发过程中,会经常遇到ASP.NET repeater控件添加序号列,有些新手可能还不会,网上搜集整理了一些,需要的朋友可以参考下
收藏 0 赞 0 分享

GridView常用操作事件图文介绍

对于gridview学NET的同学再熟悉不过,但是其中功能事件是否能编码熟练实现
收藏 0 赞 0 分享

批量账号的login测试功能实现

用WaitiN写了个简单的login自动化测试,能够使用少量的代码实现批量账号的login测试,需要的朋友可以参考下
收藏 0 赞 0 分享

iis配置asp.net常见问题解决方案

如何解决iis配置asp.net常见一些问题,根据自己的使用经验,总结了一些,希望可以帮助你问
收藏 0 赞 0 分享

.net自带的库生成zip文件的方法

平时我们创建Zip文件的时候,要么用现成的软件,要么用第三方的开源库。其实用.net自带的类操作起来也非常方便
收藏 0 赞 0 分享

asp.net中Post表单保存页面状态并输出源码的实现方法

先执行脚本,复制源码到隐藏域里,再输出源码,注意代码红色设置
收藏 0 赞 0 分享

用Html5与Asp.net MVC上传多个文件的实现代码

Html 5 的有一些File API,对Form表单增强的特性,让我们轻松支持多文件上传,看下面的Html片断代码
收藏 0 赞 0 分享
查看更多