ASP.NET jQuery 實(shí)例1(在TextBox里面創(chuàng)建一個(gè)默認(rèn)提示)
更新時(shí)間：2012年01月13日 22:12:56 作者：
通常用戶在搜索內(nèi)容時(shí)，在文本框輸入內(nèi)容前，文本框都會給出默認(rèn)提示，提示用戶輸入正確的內(nèi)容進(jìn)行搜索
當(dāng)文本框獲得焦點(diǎn)，如果文本框內(nèi)容跟提示內(nèi)容一樣，提示內(nèi)容會自然消失。
當(dāng)文本框沒有任何值并失去焦點(diǎn)，文本框內(nèi)容會重新生成默認(rèn)提示。
為了實(shí)現(xiàn)上面的需求，代碼如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe1.aspx.cs" Inherits="Recipe1" %>
<!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>Recipe1</title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<style type="text/css">
.defaultText
{
font-style: italic;
color: #CCCCCC;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var searchBox = $("#<%=txtSearch.ClientID %>"); // 通過ClientID獲取服務(wù)器控件ID
searchBox.focus(function () {
if (searchBox.val() == this.title) { // TextBox控件ToolTip屬性轉(zhuǎn)換為Html為title屬性
searchBox.val("");
searchBox.removeClass("defaultText");
}
});
searchBox.blur(function () {
if (searchBox.val() == "") {
searchBox.val(this.title);
searchBox.addClass("defaultText");
}
});
searchBox.blur();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
</p>
<div align="center">
<fieldset style="width: 400px; height: 80px;">
<p>
<asp:TextBox ID="txtSearch" runat="server" Width="200px" CssClass="defaultText" ToolTip="請輸入搜索的關(guān)鍵字"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="搜索" /></p>
</fieldset>
</div>
</form>
</body>
</html>
當(dāng)文本框沒有任何值并失去焦點(diǎn)，文本框內(nèi)容會重新生成默認(rèn)提示。
為了實(shí)現(xiàn)上面的需求，代碼如下：
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe1.aspx.cs" Inherits="Recipe1" %>
<!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>Recipe1</title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<style type="text/css">
.defaultText
{
font-style: italic;
color: #CCCCCC;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
var searchBox = $("#<%=txtSearch.ClientID %>"); // 通過ClientID獲取服務(wù)器控件ID
searchBox.focus(function () {
if (searchBox.val() == this.title) { // TextBox控件ToolTip屬性轉(zhuǎn)換為Html為title屬性
searchBox.val("");
searchBox.removeClass("defaultText");
}
});
searchBox.blur(function () {
if (searchBox.val() == "") {
searchBox.val(this.title);
searchBox.addClass("defaultText");
}
});
searchBox.blur();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<p>
</p>
<div align="center">
<fieldset style="width: 400px; height: 80px;">
<p>
<asp:TextBox ID="txtSearch" runat="server" Width="200px" CssClass="defaultText" ToolTip="請輸入搜索的關(guān)鍵字"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="搜索" /></p>
</fieldset>
</div>
</form>
</body>
</html>
顯示效果：
您可能感興趣的文章:
- jquery+ajax+text文本框?qū)崿F(xiàn)智能提示完整實(shí)例
- 基于jQuery的彈出警告對話框美化插件(警告，確認(rèn)和提示)
- 基于jquery的氣泡提示效果
- Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
- jquery 實(shí)現(xiàn)輸入郵箱時(shí)自動補(bǔ)全下拉提示功能
- jquery實(shí)現(xiàn)表單輸入時(shí)提示文字滑動向上效果
- jQuery插件EnPlaceholder實(shí)現(xiàn)輸入框提示文字
- jQuery實(shí)現(xiàn)手機(jī)號碼輸入提示功能實(shí)例
- jQuery表單獲取和失去焦點(diǎn)輸入框提示效果的實(shí)例代碼
- jquery限制輸入字?jǐn)?shù),并提示剩余字?jǐn)?shù)實(shí)現(xiàn)代碼
- 基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
- jQuery擴(kuò)展實(shí)現(xiàn)text提示還能輸入多少字節(jié)的方法
相關(guān)文章
省市區(qū)三級聯(lián)動jquery實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)紹了省市區(qū)三級聯(lián)動jquery實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JQuery插件ajaxfileupload.js異步上傳文件實(shí)例
這篇文章主要介紹了JQuery插件ajaxfileupload.js異步上傳文件實(shí)例,本文直接給出了HTML代碼和JS代碼以及后臺處理代碼,需要的朋友可以參考下2015-05-05
JQuery.validationEngine表單驗(yàn)證插件(推薦)
這篇文章主要介紹了JQuery.validationEngine表單驗(yàn)證插件(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
jquery實(shí)現(xiàn)兼容瀏覽器的圖片上傳本地預(yù)覽功能
圖片上傳本地預(yù)覽功能代碼在網(wǎng)上可以搜索很多，但同時(shí)可以兼容瀏覽器的話就多了，本文有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-10-10
jQuery實(shí)現(xiàn)ajax的疊加和停止(終止ajax請求)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的疊加和停止的關(guān)鍵代碼，代碼簡單易懂，需要的朋友可以參考下2016-08-08
jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果
這篇文章主要介紹了jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果,涉及jquery操作圖片動態(tài)顯示效果,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08
ASP.NET jQuery 實(shí)例8 (動態(tài)添加內(nèi)容到DropDownList)
在web應(yīng)用里，我們經(jīng)常需要通過其他控件的事件觸發(fā)動態(tài)構(gòu)造DropDownList數(shù)據(jù)內(nèi)容。在這節(jié)中，我們將會看到如何實(shí)現(xiàn)通過選擇第一個(gè)下來框的內(nèi)容來動態(tài)構(gòu)造第二個(gè)下拉框的內(nèi)容2012-02-02
本篇文章主要介紹了jQuery中Nicescroll滾動條插件的用法，Nicescroll滾動條插件是一個(gè)非常強(qiáng)大的基于jQuery的滾動條插件，有需要的可以了解下。2016-11-11
想在頁面加載完成后，有幾個(gè)地方顯示當(dāng)前時(shí)間，所以想通過jquery給多個(gè)span賦值,需要的朋友可以參考下2014-05-05
Jquery中LigerUi的彈出編輯框(實(shí)現(xiàn)方法)
本篇文章是對Jquery中LigerUi的彈出編輯框的實(shí)現(xiàn)方法進(jìn)行了分析介紹，需要的朋友可以參考下2013-07-07