.blur 在页面加载后不起作用答案

【问题标题】：.blur not working after page load.blur 在页面加载后不起作用
【发布时间】：2013-03-26 17:47:51
【问题描述】：

我必须进行简单的验证。第一次可以正常工作，但是在文本中填充值后，如果按 F5 刷新页面，则代码将无法正常工作。

产生错误的步骤

关注第一个文本框并模糊而不填充任何值。函数将警告“错误”，并且名为错误的类将添加到文本框
现在将在文本框中输入值并按 F5。然后从文本框中删除值，模糊功能将提示“无错误”这是问题。它应该提醒我们，因为我们在空文本框上模糊。

我投资了门，发现这个问题是因为 onload 功能，我提到代码如果输入文本值不等于空白然后模糊文本框

<head>
  <script type="text/javascript" src="jquery-1.8.3.js"></script>
  <script type="text/javascript">
    $(function(){
       $('input').blur(function(){
          if($(this).hasClass('error')){
             alert('error')
          }
          else {
             alert('no error')
         }
     }) 
  })

  function test(id){
     if($(id).val()==''){
       $(id).addClass('error')
     }
     else {
       $(id).removeClass('error')
     }
  }

  $(function(){
     setTimeout(function(){
          $('input').each(function(){
             if($(this).val()!=''){
                $(this).blur();
             }
          })
     },1000)
  })
</script>
<style>
    .error{ border:#F00 solid 1px}
</style>
</head>


<body>
    <input type="text" onblur="test(this)"/>
    <input type="text" onblur="test(this)" />
</body>

【问题讨论】：

您使用的是哪个浏览器和哪个 jquery 版本？
我使用的是 1.8.3 版本和 mozilla firefox
实际上在第一次 test() 函数首先执行但在页面刷新时 .blur 函数首先执行
这个方法先执行jquery blur函数然后执行event blur $(this).blur();

标签： javascript jquery

【解决方案1】：

最好在判断输入框是否为空的时候检查值，而不是css类。

$('input').blur(function () {
    if ($.trim($(this).val()) == '') {
        alert('error')
    } else {
        alert('no error')
    }
});

我认为 FF 试图保留 HTML 文档的状态，因此该类仍然应用于元素

【讨论】：

【解决方案2】：

只需尝试以下方法：

脚本部分：

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
  function test(textId){    
     if($("#"+textId).val()==""){
       $("#"+textId).addClass("error"); 
       alert("Error"); 
       setTimeout(function(){
       $("#"+textId).focus();
       },100);
       return false;
     }
     else {
       $("#"+textId).removeClass("error");
       alert("No Error");
       return true;
     }
  }
  </script>

HTML 部分：

<style>
    .error{ border:#F00 solid 1px}
</style>
<body>
    <input type="text" onblur="test(this.id);" id="text1" value=""/>
    <input type="text" onblur="test(this.id);" id="text2" value=""/>
</body>

我认为这可以帮助您解决问题。

【讨论】：