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="请填写您的邮箱地址" />

最终的显示效果如下：