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都需要添加相应的判断代码
---- 以后哪天找到更好的方法，再慢慢改进！