基于jQuery的輸入框無值自動顯示指定數(shù)據(jù)的實現(xiàn)代碼

更新時間：2011年01月24日 00:03:15 作者：

在自己的網(wǎng)頁中，常常要實現(xiàn)指定樣式的輸入框，當(dāng)輸入框中沒有輸入或只輸入空格等無效信息時，自動顯示指定的文本，以提醒用戶應(yīng)該如何操作，下面是具體實現(xiàn)方法，僅供參考。

【解決方案】

　　1. 準(zhǔn)備工作

　　（1）輸入框

復(fù)制代碼代碼如下:

　　（2）CSS代碼

復(fù)制代碼代碼如下:

input.helpText { color: #aaa;}

（3）轉(zhuǎn)換方法

復(fù)制代碼代碼如下:

 
function switchText() 
{ 
if ($(this).val() == $(this).attr('title')) 
$(this).val('').removeClass('helpText'); 
else if ($.trim($(this).val()) == '') 
$(this).addClass('helpText').val($(this).attr('title')); 
} 

（4）具體實現(xiàn)

復(fù)制代碼代碼如下:

 
$('input[type=text][title!=""]').each(function() { 
if ($.trim($(this).val()) == '') $(this).val($(this).attr('title')); 
if ($(this).val() == $(this).attr('title')) $(this).addClass('helpText'); 
}).focus(switchText).blur(switchText); 

$('form').submit(function() { 
$(this).find('input[type=text][title!=""]').each(function() { 
if ($(this).val() == $(this).attr('title')) $(this).val(''); 
}); 
}); 

2. 參考文章
http://webservices.blog.gustavus.edu/2008/06/23/text-input-example-text-with-jquery/

您可能感興趣的文章:

相關(guān)文章

關(guān)于hashchangebroker和statehashable的補充文檔
我覺得之前寫的兩篇隨筆有點不負責(zé)任，完全沒寫明白，補充了一份文檔（權(quán)且算是文檔吧=.=）
2011-08-08
jQuery實現(xiàn)的自適應(yīng)焦點圖效果完整實例
這篇文章主要介紹了jQuery實現(xiàn)的自適應(yīng)焦點圖效果,結(jié)合完整實例形式分析了jQuery事件響應(yīng)及動態(tài)操作頁面元素屬性的相關(guān)技巧,需要的朋友可以參考下
2016-08-08
jQuery彈出(alert)select選擇的值
利用jQuery彈出select選擇的值,當(dāng)單擊按鈕的時候就會執(zhí)行的一個方法，它的作用就是alert select值
2013-04-04
淺談jQuery為哪般去掉了瀏覽器檢測
下面小編就為大家?guī)硪黄獪\談jQuery為哪般去掉了瀏覽器檢測。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-08-08
greybox——不開新窗口看新的網(wǎng)頁
這篇文章主要介紹了greybox——不開新窗口看新的網(wǎng)頁
2007-02-02
使用jQuery操作DOM的方法小結(jié)
本文主要介紹了使用jQuery操作DOM的方法，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
jquery漸隱漸顯的圖片幻燈閃爍切換實現(xiàn)方法
這篇文章主要介紹了jquery漸隱漸顯的圖片幻燈閃爍切換實現(xiàn)方法,實例分析了jQuery操作圖片的技巧及鼠標(biāo)事件用法,需要的朋友可以參考下
2015-02-02
jQuery中:checked選擇器用法實例
這篇文章主要介紹了jQuery中:checked選擇器用法,實例分析了:checked選擇器的功能、定義及選取選中的復(fù)選框或單選按鈕時的使用技巧,需要的朋友可以參考下
2015-01-01
jQuery快速高效制作網(wǎng)頁交互特效
本文主要介紹了使用jQuery快速高效制作網(wǎng)頁交互特效的方法，具有很好的參考價值，下面跟著小編一起來看下吧
2017-02-02
jquery加載圖片時以淡入方式顯示的方法
這篇文章主要介紹了jquery加載圖片時以淡入方式顯示的方法,涉及hide與fadeIn等方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-01-01