如何在输入处于活动状态时显示和隐藏div

在输入处于活动状态时显示和隐藏div可以通过以下几种方式实现：

使用JavaScript事件监听：可以通过给输入框添加focus和blur事件监听器来实现。当输入框获取焦点时，显示div；当输入框失去焦点时，隐藏div。示例代码如下：

<input type="text" id="input" onfocus="showDiv()" onblur="hideDiv()">
<div id="myDiv" style="display: none;">这是要显示和隐藏的div</div>

<script>
function showDiv() {
  document.getElementById("myDiv").style.display = "block";
}

function hideDiv() {
  document.getElementById("myDiv").style.display = "none";
}
</script>

使用CSS伪类选择器：可以使用CSS的:focus伪类选择器来实现。当输入框获取焦点时，显示相邻的div；当输入框失去焦点时，隐藏相邻的div。示例代码如下：

<style>
input:focus + div {
  display: block;
}

div {
  display: none;
}
</style>

<input type="text">
<div>这是要显示和隐藏的div</div>

使用jQuery库：如果你使用了jQuery库，可以使用其提供的focus()和blur()方法来实现。示例代码如下：

<input type="text" id="input">
<div id="myDiv" style="display: none;">这是要显示和隐藏的div</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#input").focus(function() {
    $("#myDiv").show();
  });

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

以上是三种常见的实现方式，根据你的具体需求和项目环境选择适合的方式即可。