• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    asp.net使用jquery实现搜索框默认提示功能

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

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

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

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

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

    复制代码 代码如下:

    %@ 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>

    您可能感兴趣的文章:
    • 让input框实现类似百度的搜索提示(基于jquery事件监听)
    • Jquery实现搜索框提示功能示例代码
    • jquery+php实现搜索框自动提示
    • jquery 模拟类搜索框自动完成搜索提示功能(改进)
    • jQuery 插件仿百度搜索框智能提示(带Value值)
    • 利用JQuery为搜索栏增加tag提示
    • Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
    • jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
    • jquery实现非叠加式的搜索框提示效果
    • 基于jQueryUI和Corethink实现百度的搜索提示功能
    • jQuery实现模拟搜索引擎的智能提示功能简单示例
    上一篇:解决ASP.NET回传后div滚动条位置复位的问题(利用隐藏控件原理)
    下一篇:vb.net借助剪贴板将图片导入excel内
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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