js中的焦点事件问题

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

 

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

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

 

屏蔽了上述函数，对各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> <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) { if((element_name=='phone')&&($('#phone').val()=='为了方便联系，请您留下手机号')){ $('#phone').val(''); } if((element_name=='email')&&($('#email').val()=='为了方便联系，请您留下邮箱地址')){ $('#email').val(''); } return true; } function set_default(element_name){ if((element_name=='phone')&&($('#phone').val()=='')){ $('#phone').val('为了方便联系，请您留下手机号'); } if((element_name=='email')&&($('#email').val()=='')){ $('#email').val('为了方便联系，请您留下邮箱地址'); } return true; }

 

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

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

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

 

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