使用 jQuery focus 和 blur 显示和隐藏消息答案

【问题标题】：Using jQuery focus and blur to show and hide a message使用 jQuery focus 和 blur 显示和隐藏消息
【发布时间】：2012-02-09 05:52:16
【问题描述】：

我点击在textbox 上设置focus，一旦我设置了焦点，我就会尝试显示一条简单的消息。然后在blur 上，该消息消失了。

这是我的代码：如果我点击textbox，它会显示消息，但如果我点击该按钮，它不会像我想象的那样设置焦点。

<script>
$(document).ready(function(){    
  $("#clicker").click(function(){        
    $("#T1").focus(function(){            
      $("#myFocus").show();        
    });     
  });        

  $("#T1").blur(function(){        
    $("#myFocus").hide();    
  });
});
</script>

<body>
<div id="clicker" style="cursor:pointer; border:1px solid black; width:70px;">
  Click here!
</div>
<br /><br />
<input id="T1" name="Textbox" type="text" />
<div id="myFocus" style="display: none;">focused!</div>

【问题讨论】：

问题解决了吗？你还有困难吗？

标签： javascript jquery html focus onblur

【解决方案1】：

您需要触发焦点事件，而不是定义它。试试这个：

<script>
$(function() { // Shorthand for $(document).ready(function() {
      $('#clicker').click(function() {
            $('#T1').focus(); // Trigger focus
      });

      $('#T1').focus(function() { // Define focus handler
            $('#myFocus').show();
      }).blur(function() {
            $('#myFocus').hide();
      });
});
</script>

【讨论】：

【解决方案2】：

问题出在这里：

$("#T1").focus(function(){            
      $("#myFocus").show();        
});

您应该使用focus() 触发事件，而不是使用focus(function(){...} 附加回调

固定代码：

$(document).ready(function(){    
  $("#clicker").click(function(){        
        $('#T1').focus();
  });        

  $("#T1").blur(function(){        
      $("#myFocus").hide();    
  })     .focus(funcion(){
              $("#myFocus").show();        
          });
});

【讨论】：