主頁 > 知識庫 > asp.net使用jquery實現(xiàn)搜索框默認提示功能

asp.net使用jquery實現(xiàn)搜索框默認提示功能

熱門標簽:廣州銷售外呼系統(tǒng)定制 怎樣給陜西地圖標注顏色 福州人工智能電銷機器人加盟 400電話辦理信任翰諾科技 ai電銷機器人對貸款有幫助嗎 電銷機器人 數(shù)據(jù) 宿遷智能外呼系統(tǒng)排名 云狐人工智能電話機器人 地圖標注多少錢一張

文本框中創(chuàng)建默認文本提示

通常用戶在搜索內容時,在文本框輸入內容前,文本框都會給出默認提示,提示用戶輸入正確的內容進行搜索。

當文本框獲得焦點,如果文本框內容跟提示內容一樣,提示內容會自然消失。

當文本框沒有任何值并失去焦點,文本框內容會重新生成默認提示。

為了實現(xiàn)上面的需求,代碼如下:

復制代碼 代碼如下:

%@ 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框實現(xiàn)類似百度的搜索提示(基于jquery事件監(jiān)聽)
  • Jquery實現(xiàn)搜索框提示功能示例代碼
  • jquery+php實現(xiàn)搜索框自動提示
  • jquery 模擬類搜索框自動完成搜索提示功能(改進)
  • jQuery 插件仿百度搜索框智能提示(帶Value值)
  • 利用JQuery為搜索欄增加tag提示
  • Jquery模仿Baidu、Google搜索時自動補充搜索結果提示
  • jquery 關鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應放大”效果 的實現(xiàn)
  • jquery實現(xiàn)非疊加式的搜索框提示效果
  • 基于jQueryUI和Corethink實現(xiàn)百度的搜索提示功能
  • jQuery實現(xiàn)模擬搜索引擎的智能提示功能簡單示例

標簽:大興安嶺 宜春 延安 綿陽 焦作 曲靖 黃南 新疆

巨人網(wǎng)絡通訊聲明:本文標題《asp.net使用jquery實現(xiàn)搜索框默認提示功能》,本文關鍵詞  asp.net,使用,jquery,實現(xiàn),搜索,;如發(fā)現(xiàn)本文內容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《asp.net使用jquery實現(xiàn)搜索框默認提示功能》相關的同類信息!
  • 本頁收集關于asp.net使用jquery實現(xiàn)搜索框默認提示功能的相關信息資訊供網(wǎng)民參考!
  • 推薦文章