学步园

在web页面中，经常要实现这样一个js功能：鼠标焦点落到输入框内，输入框原有默认值消失，当失去焦点时，如果用户未输入任何内容，怎还是显示默认值。

今天在修改一页面时，发现一个问题：在页面是可以实现上述功能，但提交表单后，由于在服务端数据校验不通过时（为测试服务端的校验功能，屏蔽了前端的js校验。），alert 弹提示框后，再history.back(-1);返回表单填写页时，表单中默认内容是用户输入的不合法的内容（到此处没问题），但是当鼠标焦点落到输入框内时，原有不合法的内容就消失了，用户得从头输入，用户体验不太好，查看了原js，是由一个函数完成的（此函数的没看太明白），如下：

$(function(){<br /> $(":text").each(function(index,ele) {<br /> var tip=$(ele).val();<br /> $(this).focus(function(){<br /> if($(this).val()==tip){<br /> $(this).val('');<br /> }<br /> $(this).addClass('focus_text');<br /> }).blur(function(){<br /> if(!$(this).val()){<br /> $(this).val(tip).removeClass('focus_text')<br /> }<br /> })<br /> });<br /> })

屏蔽了上述函数，对各input元素，添加了 Onblur（失去焦点）、onfocus（获得焦点）的事件响应。大概思路是：

blur时，检查元素的值是否等于''，如果是，就修改其值为默认值，如果不是就不做操作

focus时，检查元素的值是否等于默认值，如果是，就修改其值为''，如果不是就不做操作

具体代码如下：

1、html页面中（部分）

<p class="row"><label class="col1 big stress" for="phone">您的电话:</label><input class="text" id="phone" type="text" name="phone" value="为了方便联系，请您留下手机号" onkeydown="return test(event);" onfocus="return clean_default('phone');" onblur="return set_default('phone');"/></p><br /> <p class="row"><label class="col1 big stress" for="email">您的邮箱:</label><input class="text" id="email" type="text" name="email" value="为了方便联系，请您留下邮箱地址" onfocus="return clean_default('email');" onblur="return set_default('email');"/></p>

2、js

function clean_default(element_name)<br /> {<br /> if((element_name=='phone')&&($('#phone').val()=='为了方便联系，请您留下手机号')){<br /> $('#phone').val('');<br /> }</p> <p> if((element_name=='email')&&($('#email').val()=='为了方便联系，请您留下邮箱地址')){<br /> $('#email').val('');<br /> }<br /> return true;<br /> }</p> <p>function set_default(element_name){</p> <p> if((element_name=='phone')&&($('#phone').val()=='')){<br /> $('#phone').val('为了方便联系，请您留下手机号');<br /> }</p> <p> if((element_name=='email')&&($('#email').val()=='')){<br /> $('#email').val('为了方便联系，请您留下邮箱地址');<br /> }<br /> return true;<br /> }

这样就可以实现最开始的功能了，这样写有2个缺点：

1、input元素默认值内容修改时，js将失效

2、每添加一个input都需要添加相应的判断代码

---- 以后哪天找到更好的方法，再慢慢改进！