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

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

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

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

为了实现上面的需求，代码如下：

<%@ 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 JQuery 随笔-搜索框默认提示的更多相关文章

  1. jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框

    jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...

  2. input文本框默认提示

    今天闲暇时间把自己以前写的一个文本框默认提示函数改成了一个小插件.下面是代码 1.引入jQuery库 <script src="http://code.jquery.com/jquer ...

  3. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  4. 用jQuery实现搜索框的过滤效果

    遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...

  5. Jquery实现搜索框提示功能

    博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...

  6. jquery实现密码框显示提示文字

    jquery实现密码框提示文字的功能. 代码:    <html>  <head>   3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...

  7. Ternary Search Tree 应用--搜索框智能提示

    前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...

  8. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

  9. 使用jquery实现搜索框的位置变换

    现在很多的网站都存在这样一个效果:当用户搜索信息后,滚动内容时,搜索框的位置会产生变化,会固定在某个位置,方便用户进行再次搜索.比如百度图片.为了提高系统用户体验,也想加入这个效果,经过小段时间摸索, ...

随机推荐

  1. Euromonitor 2013年奢侈品报告精选 |华丽志

    Euromonitor 2013年奢侈品报告精选 |华丽志 Euromonitor 2013年奢侈品报告精选

  2. Github实例教程-创建库、创建主页

    以README文件为实例,具体介绍github的使用过程 请先下载git,然后配置下面内容: ( 我的系统是debian,其它版本号的UNIX/Linux有区别),windows的临时不清楚. (一) ...

  3. linux线程之pthread_join和pthread_detach

    在任何一个时间点上,线程是可结合的(joinable)或者是分离的(detached).一个可结合的线程能够被其他线程收回其资源和杀死.在 被其他线程回收之前,它的存储器资源(例如栈)是不释放的.相反 ...

  4. objective-C学习笔记（三）数据成员：属性与实例变量

    类型成员 Type Member 结构体 struct 的成员很简单,只有变量. 类的成员就很多了: 数据成员 data member 描述对象(本讲重点) · 实例变量  instance vari ...

  5. c++ primer plus 习题答案(4)

    p333.3 #include<iostream> #include<cstdlib> #include<cstring> #include<string&g ...

  6. ORA-02396: exceeded maximum idle time, please connect again的原因

    一般为了防止过多活动的session占用资源,可以对允许连接到数据库的session个数,已连接到数据库的session空闲时间等进行限制(当然也可以对尝试连接次数等其它很多内容进行限制).方式就是可 ...

  7. Mac OS X 下 TAR.GZ 方式安装 MySQL 5.7+

     方法: http://www.widlabs.com/article/mac-os-x-install-mysql-57-with-tar-gz  mysql下载地址:http://www.mysq ...

  8. jquery左右自适应伸缩插件

    简单css布局 body { margin: 0 auto; padding: 0 auto; } .showpannal { position:absolute; left: 200px; top: ...

  9. CRM中的一个函数，保存一下，别系统被ぅ崩坏就麻烦了.

    CREATE OR REPLACE function UXQLCRM.GET_WEI_XIU(htfid in varchar2) ); CURSOR cr_bg_jl is select " ...

  10. Qt中QPushButton、QTabWidget等部件内容文字换行的解决方法（一定要写在源码里，写在翻译文件里不行，因为\n得不到转义）

    最近在做基于Qt的应用项目,其中有一个按钮文字超长,需要换一行显示.从网上找到的建议都是将要显示的内容做成图片,然后将图片设置为该按钮的背景.但是这样做有一个很大的局限性,当需要更改内容文字的时候,需 ...