텍스트 상자에서 클릭 수를 사용할 때 div를 확장 하시겠습니까?

Question

사용자가 텍스트를 입력하기 위해 텍스트 상자에서 마우스를 클릭 할 때 내용을 표시하도록 div를 확장하고 싶습니다. 나는 그 어느 곳에서나 보지 못했다. 나는 onClick을 확장하는 방법을 알고 있지만, 누군가 내가 찾고있는 것을 가리킬 수 있습니까?

기본적으로 전자 메일 주소 입력란을 표시하려는 전자 메일 가입 상자가 있지만 사용자가 전자 메일 목록에 실제로 참여하기로 결정한 경우 해당 전자 메일 관리자가 확장되어 해당 이름을 묻습니다. 및 우편 번호.

감사합니다.

내가있어 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

텍스트 상자를 클릭하는 대신 포커스를 사용할 수 있습니다. 당신이 slideDown 효과를 원한다면

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

당신은 당신이에 대한 focus() 이벤트를 사용할 수 있습니다 slideDown

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

Answer 2

를 사용할 수 있습니다. 여러 요소에 대해이를 원하고 다른 것들에 대한 ID가 필요한 경우 클래스를 표식으로 사용하십시오. blur() 이벤트도 추가 할 수 있습니다. 가정 태그 : CSS와

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

stop() 호출 사업부에서 현재 실행중인 애니메이션을 중지하는 데 유용하고에 좋은 습관 :

div.details { display: none; } 

이 작업을 수행 다른 이벤트로 인해 여러 애니메이션을 실행하면됩니다.

그래서 모든 입력 요소에이 기능을 추가 :

• 이 그것을 원하는 ID를 부여;
• "정보"클래스를 제공하십시오.
• 끝에 ID가 "_info"인 <div>을 만듭니다.
• <div> 클래스에 "세부 정보"를 지정하십시오.

이제 입력 요소 옆에 배치 할 수 있습니다.

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

및 자바 스크립트 :

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

가 필요에 따라 오프셋을 조정할 그렇다면, CSS를 변경합니다.