使用 jQuery 焦点和模糊来显示和隐藏消息

发布于 2025-01-03 12:01:11 字数 754 浏览 5 评论 0原文

我单击在文本框上设置焦点，设置焦点后，我将尝试显示一条简单的消息。然后在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>

原文

I am clicking to set focus on a textbox, and once I have set focus I am trying to display a simple message. Then on blur that message disappears.

Here is my code: If I click on the textbox it displays the message but if I click the button it doesn't set focus as I thought it would.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

归属感 2025-01-10 12:01:11

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

<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>

You need to trigger the focus event, instead of defining it. Try this instead:

<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>

回复收藏 0 原文

秋意浓 2025-01-10 12:01:11

问题在于：

$("#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();        
          });
});

The problem is here:

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

You should trigger the event with focus() not attach a callback with focus(function(){...}

Fixed code:

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

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

回复收藏 0 原文

~没有更多了~