jQuery 文本框得失焦点的简单实例


以下是一个简单的jQuery示例,用于处理文本框的获得焦点(focus)和失去焦点(blur)事件。这个示例会在文本框获得焦点时显示一条消息,并在失去焦点时隐藏该消息。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Textbox Focus and Blur Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // 当文本框获得焦点时
  $("#myTextbox").focus(function(){
    $("#message").show().text("文本框已获得焦点");
  });
  
  // 当文本框失去焦点时
  $("#myTextbox").blur(function(){
    $("#message").hide();
  });
});
</script>
</head>
<body>

<input type="text" id="myTextbox" placeholder="点击我">
<div id="message" style="display:none; margin-top:10px;">消息将在这里显示</div>

</body>
</html>

在这个示例中,我们首先引入了jQuery库。在`