ASP.NET jQuery 實例1(在TextBox里面創(chuàng)建一個默認提示)
更新時間:2012年01月13日 22:12:56 作者:
通常用戶在搜索內(nèi)容時,在文本框輸入內(nèi)容前,文本框都會給出默認提示,提示用戶輸入正確的內(nèi)容進行搜索
當文本框獲得焦點,如果文本框內(nèi)容跟提示內(nèi)容一樣,提示內(nèi)容會自然消失。
當文本框沒有任何值并失去焦點,文本框內(nèi)容會重新生成默認提示。
為了實現(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>
當文本框沒有任何值并失去焦點,文本框內(nèi)容會重新生成默認提示。
為了實現(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)智能提示完整實例
- 基于jQuery的彈出警告對話框美化插件(警告,確認和提示)
- 基于jquery的氣泡提示效果
- Jquery實現(xiàn)搜索框提示功能示例代碼
- jquery 實現(xiàn)輸入郵箱時自動補全下拉提示功能
- jquery實現(xiàn)表單輸入時提示文字滑動向上效果
- jQuery插件EnPlaceholder實現(xiàn)輸入框提示文字
- jQuery實現(xiàn)手機號碼輸入提示功能實例
- jQuery表單獲取和失去焦點輸入框提示效果的實例代碼
- jquery限制輸入字數(shù),并提示剩余字數(shù)實現(xiàn)代碼
- 基于jQuery的input輸入框下拉提示層(自動郵箱后綴名)
- jQuery擴展實現(xiàn)text提示還能輸入多少字節(jié)的方法
相關(guān)文章
jQuery.ajax向后臺傳遞數(shù)組問題的解決方法
這篇文章主要為大家詳細介紹了jQuery.ajax向后臺傳遞數(shù)組問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05jQuery+正則+文本框只能輸入數(shù)字的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query+正則+文本框只能輸入數(shù)字的實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jQuery構(gòu)造函數(shù)init參數(shù)分析續(xù)
其實樓主的F和jQuery.fn.init是相等的; 實現(xiàn)功能是和jq一樣的, 只是jq的把構(gòu)造函數(shù)放進原型;如果非要說原因,個人理解jq這樣寫整體結(jié)構(gòu)清晰,先是入口構(gòu)造函數(shù),緊跟著是原型部分(原型里面init是初始化),但是不好理解;乍一看確實挺繞, 我也是看了好久才明白怎么回事2015-05-05jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法
本篇文章主要是對jquery fancybox ie6不顯示關(guān)閉按鈕的解決辦法進行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12