리디렉션 후 jQuery .focus 이벤트가 배경색을 녹색으로 변경하는 이유는 무엇입니까?

목표 :리디렉션 후 jQuery .focus 이벤트가 배경색을 녹색으로 변경하는 이유는 무엇입니까?

가 첫 번째 입력 상자 배경 색 변화를 가지고 리디렉션 후 (target.html 자세한에) 녹색. Google 크롬에서 명시 적으로 링크 (URL 막대에 입력)로 이동하면 작동합니다.

나는 구글 크롬이 버전의 사용하고 있습니다 : 13.0.782.112

그것은이 하나 jFiddle를 사용하기는 어렵습니다을, 그래서 난 그냥 (CDN) jQuery를 파일에게 콘텐츠 전송 네트워크를 사용하여 당신에게 코드를주지 당신을 위해 더 쉽게 만들 수 있습니다.

자세한 내용은이 질문을 참조 :

Why doesn't initial page focus change input field to Green on Google Chrome?

소스 페이지 :
이 (source.html이 페이지의 이름을)

<html> 
<head> 
</head> 
<body> 

<a href="./target.html">click this hyperlink in Google Chrome and see if the background-color changes to green on the first input field on target.html</a> 

</body> 
</html>

대상 페이지를 :
는가

<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 

    <script type="text/javascript"> 

     function Change(obj, evt) { 
      if (evt.type == "focus") { 
       $(obj).css('border-color', '#000000'); 
       $(obj).css('background-color', '#90EE90'); 
      } 
      else if (evt.type == "blur") { 
       $(obj).css('border-color', '#FFFFFF'); 
       $(obj).css('background-color', '#7AC5CD'); 
      } 
     } 

     $(document).ready(function() { 
      $("#Txt1").focus(); 
     }); 

    </script> 

    <style type="text/css"> 

    .InputField 
    { 
     color: black; 
     font-size: 12px; 
     font-weight: bold; 
     background-color: #7AC5CD; 
    } 

    </style> 

</head> 

<body> 

<input id="Txt1" runat="server" class="InputField" onfocus="Change(this, event)" onblur="Change(this, event)" /><br /> 
<input id="Txt2" runat="server" class="InputField" onfocus="Change(this, event)" onblur="Change(this, event)" /><br /> 
<input id="Txt3" runat="server" class="InputField" onfocus="Change(this, event)" onblur="Change(this, event)" /><br /> 

</body> 
</html>

출처

2011-08-09 MacGyver

Chrome의 '이상한 이유로 인해'변경됨 '안에 경고가 표시됩니다.'변경 '이 무한대로 호출됩니다 ... – Rafay

기술적으로 경고 메시지를 닫을 때 onfocus 이벤트가 입력에서 발생하기 때문에 발생합니다. –

매우 맞고 크롬에서만 발생합니다 ... – Rafay

여기에 가장 좋은 방법은 HTML에서 그들을 하드 코딩하는 대신에 동적으로 그 onfocus 및 onblur 이벤트를 결합하는 것입니다 (source.html 파일과 같은 폴더에 target.html 자세한 장소로이 페이지의 이름) . 이 코드는 현재 자바 스크립트를 모두 교체해야

$(document).ready(function() { 
    // bind the events 
    $('#Txt1, #Txt2, #Txt3').focus(function() { 
    $(this).css('border-color', '#000000'); 
    $(this).css('background-color', '#90EE90'); 
    }).blur(function() { 
    $(this).css('border-color', '#FFFFFF'); 
    $(this).css('background-color', '#7AC5CD'); 
    }); 
    // trigger the first focus event 
    $('#Txt1').focus(); 
});

뿐만 아니라, 그 입력 상자에 onfocus 및 on blur 속성 : 이런 식으로 뭔가.

현재 솔루션을 사용하는 경우 자바 스크립트가 아닌 HTML에 바인딩 된 이벤트를 트리거하는 것과 관련하여 jQuery 또는 Chrome (또는 둘 다)에 버그가있는 것으로 보입니다. 어떤 이유로 든 DOMContentLoaded 이벤트가 onfocus 이벤트 대신 'evt'변수로 전달되는 것입니다.

버그를 더 자세히 조사하고 버그 보고서를 제출하는 데 관심이있는 경우 변경 기능의 첫 번째 줄에 window.console.log(evt); 문을 추가하여 더 자세한 내용을 확인할 수 있습니다. 그런 다음 WebKit Web Inspector를 열고 콘솔을 보면 이벤트 객체가 표시되며 실제로 '포커스'여야하지만 해당 유형이 'DOMContentLoaded'임을 알 수 있습니다.

출처

2011-08-10 00:35:24

NIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIICE work! – MacGyver

리디렉션 후 jQuery .focus 이벤트가 배경색을 녹색으로 변경하는 이유는 무엇입니까?

답변

관련 문제