javascript - 在文本框中点击时展开div？

Question

我希望当用户在文本框中单击鼠标输入文本时，div 展开以显示内容。我以前从未在任何地方见过这种情况。我知道如何使内容在单击时展开，但是有人可以指出我正在寻找的内容吗？

基本上，我有一个电子邮件注册框，我只想显示电子邮件地址的输入字段，但如果用户实际上决定进入电子邮件列表，该 div 将展开以询问他们的姓名和邮政编码。

谢谢!

我现在已经为电子邮件表单设置了 jquery，所以如果可能的话我想对此进行扩展:

编辑:这是我到目前为止所拥有的:

 <div class="outeremailcontainer">
    <div id="emailcontainer">
    <?php include('verify.php'); ?>
      <form action="emailform.php" method="post" id="sendEmail" class="email">
        <h3 class="register2">Newsletter Signup:</h3>
        <ul class="forms email">
             <li class="email"><label for="emailFrom">Email: </label><input type="text" name="emailFrom" id="emailFrom name" value="<?= $_POST['emailFrom']; ?>" /><?php if(isset($emailFromError)) echo '<span class="error">'.$emailFromError.'</span>'; ?></li>
           <li class="buttons email"><button type="submit" id="submit">Send</button><input type="hidden" name="submitted" id="submitted" value="true" /></li>
        </ul>
                <div id="details">
                         Testing
                </div>
      </form>
    <div class="clearing">
        </div>
        </div>

<script language="javascript" type="text/javascript">
    $("#name").focus(function() {
      $("#details").fadeIn();
    });

    $("#name").focus(function() {
      $("#details").stop().fadeIn();
    }).blur(function() {
      $("#details").stop().fadeOut();
    });

</script>

Answer 1

您可以使用 focus() 为此举办的事件。如果您想要多个元素使用类作为标记，并且需要 ID 来表示其他内容，请使用类作为标记。您可能需要添加 blur() 事件也是如此。假设标记:

<input type="text" id="name" class="info">
<div id="name_info" class="details">...</div>

使用 CSS:

div.details { display: none; }

这样做:

$(".info").focus(function() {
  $(this.id + "_info").stop().fadeIn();
}).blur(function() {
  $(this.id + "_info").stop().fadeOut();
});

stop() call 对于停止 div 上当前正在运行的任何动画很有用，并且当您由于不同的事件而运行多个动画时，这是一个好习惯。

因此将此功能添加到任何输入元素:

• 提供您想要的任何 ID；
• 给它一个“信息”类；
• 创建 <div>输入 ID 的 ID，末尾带有“_info”；和
• 给那个<div>一类“细节”。

现在您可能也想将其放置在输入元素旁边。如果是这样，请更改 CSS:

div.details { display: none; position: absolute; }

和 JavaScript:

$(".info").focus(function() {
  var offset = $(this).offset();
  var height = $(this).outerHeight();
  $(this.id + "_info").attr({
    top: offset.top + height + 5,
    left: offset.left
  }).stop().fadeIn();
}).blur(function() {
  $(this.id + "_info").stop().fadeOut();
});

根据需要调整偏移。