Javascript 在文本框中单击时展开div？_Javascript_Jquery

Javascript 在文本框中单击时展开div？

javascript jquery

Javascript 在文本框中单击时展开div？,javascript,jquery,Javascript,Jquery,我希望有一个div展开，当用户在文本框中单击鼠标输入文本时显示内容。我以前在任何地方都没见过。我知道如何让事情在点击后扩展，但有人能告诉我我在找什么吗基本上，我有一个电子邮件注册框，我只想显示电子邮件地址的输入字段，但如果用户真的决定进入电子邮件列表，该div将展开，同时询问他们的姓名和zipcode 谢谢我已经为电子邮件表单设置了jquery，因此如果可能的话，我想在此进行扩展：编辑：以下是我到目前为止的情况： <div class="outeremailcontainer"&g

我希望有一个div展开，当用户在文本框中单击鼠标输入文本时显示内容。我以前在任何地方都没见过。我知道如何让事情在点击后扩展，但有人能告诉我我在找什么吗

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

谢谢

我已经为电子邮件表单设置了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>


通讯注册：

电子邮件：
发送

测试
$（“#名称”）.focus（函数（）{
$（“#详细信息”）.fadeIn（）；
});
$（“#名称”）.focus（函数（）{
$（“#详细信息”）.stop（）.fadeIn（）；
}).blur（函数（）{
$（“#详细信息”）.stop（）.fadeOut（）；
});

您可以使用焦点，而不是单击文本框

$("#txtBoxID").focus(function(){
    $("#yourdivid").show("slow");
});

如果你想有一个向下滑动的效果，那么你可以使用向下滑动

$("#yourdivid").slideDown("slow");

您可以使用焦点，而不是单击文本框

$("#txtBoxID").focus(function(){
    $("#yourdivid").show("slow");
});

如果你想有一个向下滑动的效果，那么你可以使用向下滑动

$("#yourdivid").slideDown("slow");

您可以为此使用事件。如果您希望对几个元素使用类作为标记，并且需要对其他内容使用ID，请使用类作为标记。您可能还需要添加一个事件。假设标记：

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

这样做：

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

该调用对于停止div上当前正在运行的任何动画非常有用，并且是由于不同事件而运行多个动画时的一个好习惯

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

给它任何你想要的ID
给它一类“信息”
创建一个
，ID为输入的ID，末尾带有“\u info”；及
给那个
一类“细节”

现在，您可能也希望将其放置在输入元素旁边。如果是，请更改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();
});

根据需要调整偏移量。

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