1. 程式人生 > >jquery實用技巧之輸入框提示語句

jquery實用技巧之輸入框提示語句

ces 輸入數據 獲取 help lpad keyword 標簽 就是 tab

我們在編寫網頁的時候不可避免的會遇到輸入框,那麽怎麽設計輸入框才能更加優雅呢?不同的人會有不同的答案,下面分享一個比較不錯的設計。

效果圖

技術分享圖片

細節

這個效果主要是通過JQuery來實現,我的思路如下:

輸入框獲取鼠標焦點之前,顯示原標簽的value屬性值;獲取了鼠標焦點之後,如果當前value有值,那就清空,否則恢復;密碼框特殊照顧,待會講。

實現的代碼如下:

?
1 2 3 4 5 6 7 8 9 10 11 12 $("#address").focus(function(){ var address_text = $(this).val(); if(address_text==
"請輸入郵箱地址"){ $(this).val(""); } }); $("#address").blur(function(){ var address_value = $(this).val(); if(address_value==""){ $(this).val("請輸入郵箱地址") } });

完整的小例子

完整的代碼如下,尤其註意<input type="text" id="password">的實現!

?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本輸入框中內容的提示效果</title> <script type="text/javascript" src="jquery-2.2.4.min.js"></script> </head> <body> <script> $(function(){ $("#address").focus(function(){ var address_text = $(this).val();
if(address_text=="請輸入郵箱地址"){ $(this).val(""); } }); $("#password").focus(function(){ var password_text = $(this).val(); if(password_text=="請輸入密碼"){ $(this).attr("type","password"); $(this).val(""); } }); $("#address").blur(function(){ var address_value = $(this).val(); if(address_value==""){ $(this).val("請輸入郵箱地址") } }); $("#password").blur(function(){ var password_value = $(this).val(); if(password_value==""){ $(this).attr("type","text"); $(this).val("請輸入密碼") } }); }); </script> <div align="center"> <input type="text" id ="address" value="請輸入郵箱地址"><br><br> <input type="text" id ="password" value="請輸入密碼"><br><br> <input type="button" name="登錄" value="登陸"> </div> </body> </html>

$(function(){});其就是$(document).ready(function(){});的縮寫。這個倒不是什麽重點。

$(this).attr(“type”,”password”);將當前對象(也就是獲取鼠標焦點的輸入框)的屬性值進行動態的改變。達到輸入數據的時候以密碼框的形式出現。

jquery實用技巧之輸入框提示語句