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

 

最终的显示效果如下：