2013-10-10 2 views
1

빨간 블럭이 보여주는 맨 위에있는 입력을 클릭하십시오. 빨간색 블록이나 그 입력을 클릭하면 블록이 숨겨지는 것을 어떻게 멈추게합니까? 내 코드는 Chrome에서만 작동하지만 Firefox에서는 작동하지 않습니다. 당신이이 $txtMain을 대한 focusOut 번 문제는 아래 라인블러를 멈추는 방법

$txtMain.blur(function() {$popup.hide();}); 

입니다)

http://jsfiddle.net/n9Mbh/

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 

     <script src="js/libs/jquery-1.8.2/jquery.min.js"></script> 
     <script type="text/javascript"> 

      $(document).ready(function() { 
       var $txtMain = $('#txtMain'); 
       var $popupInput = $('#popupInput'); 
       var $popup = $('#popup'); 



       $popup.hide(); 

       $txtMain.focus(function() {$popup.show();}); 
       $popupInput.focus(function() {$popup.show();}); 
       $popup.focus(function() {$popup.show();}); 

       $txtMain.blur(function() {$popup.hide();}); 
       $popupInput.blur(function() {$popup.hide();}); 
       $popup.blur(function() {$popup.hide();}); 


      }); 
     </script> 
    </head> 
    <body> 

     <br /><br /> 


     <input type="text" id="txtMain" /> 

      <div id="popup" style="width: 200px; height: 200px; background: none repeat scroll 0% 0% red;" tabindex="5"><br /><br /> 
       <input type="text" id="popupInput"> 
      </div> 


       <br /><br /> 
       <br /><br /> 
       <br /><br /> 
       <br /><br /> 
       <br /><br /> 
       <br /><br /> 
       <br /><br /> 

     <input type="text" id="test" /> 
</body> 
</html> 
+0

Firefox에서 $ popupInput을 클릭하면 방금 남긴 입력에서 흐려짐이 시작되므로 숨 깁니다. 이렇게하면 $ popupInput에 포커스가 없습니다. 또는 오히려 새로운 요소에 초점을 맞추고 이전 요소를 흐리게 표시 할 수 있습니다. – ediblecode

+0

자신 만의 질문이 중복됩니다. [div는 초점을 맞추기 전에 초점을 맞추지 못합니다.] (http://stackoverflow.com/questions)/19270504/div-is-not-focused-in-time-blur-fire-before-the-focus-out) – CBroe

+0

답변을 얻지 못했습니다 –

답변

0

1 도와주세요 수, 팝업 숨기기를 받고있다.

파이어 폭스

Fiddle 당신이 뒤에 논리를 이해 희망이

$txtMain.blur(function() { 
        if (!$('#popup').is(':visible')) { 
         $popup.hide(); 
        } 
       }); 

확인을보십시오.

+0

왜 그 빈 if 문을 가지고 있습니까? 왜 그냥 반전하지 않고 $ popup.hide()를 가지고 있습니까? – ediblecode

+0

@danrhul 먼저 문제 해결을 보여주는 OP를 보여 드리고 싶습니다. if (! $ ('# popup'). (': visible')) { $ popup.hide(); }'부정을 추가하는 것은 큰 의미가 아닙니다. 어쨌든 나는하고 싶다. 대답을 업데이트하겠습니다. – Praveen

+0

답장을 보내 주셔서 감사합니다.하지만 $ txtMain, $ popupInput, $ popup을 제외한 다른 요소를 클릭하면 어떻게 빨간색 블록을 닫을 수 있습니까? 덕분에 도움을 너무 많이하고 가능한 경우 모든 이벤트를 밖으로 묶고 싶지 않아. –