input&textarea表單提示文字

現在的網頁設計上經常會涉及到表單的可以用性的設計，那表單的提示文字功能就很必要了，這樣大大的提升了用戶體驗的滿意度。我利用到了現在比較流行的JQ框架來實現此功能。

首先是導入JQ文件：

<script type="text/javascript" src="js/jquery.min1.js"></script>

新創建一個js文件，命名為input_default.js，並在導入此文件：

<script type="text/javascript" src="js/input_default.js"></script>

js code：

$(function(){
    var select_form = $('input:text,textarea'); //選擇需要添加提示文字的表單
    for(i=0;i<select_form.length;i++){          
        select_form.eq(i).val(select_form.eq(i).attr('fs')).css('color','#999');//設置表單的值為一個屬性值為“fs”的值    
    }  
    select_form.focus(function(){   //獲得焦點
        if($(this).val()==$(this).attr('fs')){
          $(this).val('');
          $(this).css('color','#333');
        }    
    })
    select_form.blur(function(){    //失去焦點  
        if($(this).val()==''){
           $(this).val($(this).attr('fs'));
           $(this).css('color','#999');
        }
    })
})

在表單中為其添加一個為“fs”的屬性，“fs”的值就是我們想要顯示在表單里面的值，代碼如下：

郵箱地址：<input type="text" name="email"  fs="請填寫您的郵箱地址" />

 

最終的顯示效果如下：