文本框中創(chuàng)建默認(rèn)文本提示
通常用戶在搜索內(nèi)容時，在文本框輸入內(nèi)容前，文本框都會給出默認(rèn)提示，提示用戶輸入正確的內(nèi)容進(jìn)行搜索。
當(dāng)文本框獲得焦點，如果文本框內(nèi)容跟提示內(nèi)容一樣，提示內(nèi)容會自然消失。
當(dāng)文本框沒有任何值并失去焦點，文本框內(nèi)容會重新生成默認(rèn)提示。
為了實現(xiàn)上面的需求，代碼如下：
復(fù)制代碼 代碼如下:
%@ 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="請輸入搜索的關(guān)鍵字">/asp:TextBox>
asp:Button ID="btnSearch" runat="server" Text="搜索" class="button blue" />
/p>
/div>
/form>
/body>
/html>
您可能感興趣的文章:- 讓input框?qū)崿F(xiàn)類似百度的搜索提示(基于jquery事件監(jiān)聽)
- Jquery實現(xiàn)搜索框提示功能示例代碼
- jquery+php實現(xiàn)搜索框自動提示
- jquery 模擬類搜索框自動完成搜索提示功能(改進(jìn))
- jQuery 插件仿百度搜索框智能提示(帶Value值)
- 利用JQuery為搜索欄增加tag提示
- Jquery模仿Baidu、Google搜索時自動補(bǔ)充搜索結(jié)果提示
- jquery 關(guān)鍵字“拖曳搜索”之“拖曳”以及 圖片“提示自適應(yīng)放大”效果 的實現(xiàn)
- jquery實現(xiàn)非疊加式的搜索框提示效果
- 基于jQueryUI和Corethink實現(xiàn)百度的搜索提示功能
- jQuery實現(xiàn)模擬搜索引擎的智能提示功能簡單示例
