input表单提示文字

在的网页设计上经常会涉及到表单的可以用性的设计，那表单的提示文字功能就很必要了，这样大大的提升了用户体验的满意度。我利用到了现在比较流行的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="请填写您的邮箱地址" />

 

最终的显示效果如下：