如何讓onfocus事件在firefox和chrome中啓用複選框

在IE中，我使用的是onfocusin事件，一切按預期方式工作，但onfocusin僅適用於IE而不適用於其他瀏覽器。此外，無論您使用哪種瀏覽器，onfocus都不適用於複選框。有沒有我在這裏丟失的東西？下面（複選框只能在IE火災）樣品我使用asp.net 4.0如何讓onfocus事件在firefox和chrome中啓用複選框

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head runat="server"> 
    <title></title> 
    <script type="text/javascript"> 
     function CheckOnFocus() { 
      alert('got focus'); 
     } 
    </script> 
    </head> 
    <body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:TextBox ID="TextBox1" runat="server" onfocus="CheckOnFocus(this);"></asp:TextBox> 
     <br /> 
     <asp:CheckBox ID="CheckBox1" runat="server" onfocusin="CheckOnFocus(this);" /> 
    </div> 
    </form> 
    </body> 
</html>

來源

2013-05-02 TroyS

在Opera，谷歌Chrome和Safari瀏覽器，使用DOMFocusIn事件而不是onfocusin事件。

在Firefox中，如果您需要檢測元素的子元素是否獲得焦點，請爲onfocus事件使用捕獲偵聽器。

要檢測元素何時失去焦點，請使用onblur，onfocusout和DOMFocusOut事件。

function Init() { 
     var form = document.getElementById ("myForm"); 
     if ("onfocusin" in form) { // Internet Explorer 
       // the attachEvent method can also be used in IE9, 
       // but we want to use the cross-browser addEventListener method if possible 
      if (form.addEventListener) { // IE from version 9 
       form.addEventListener ("focusin", OnFocusInForm, false); 
       form.addEventListener ("focusout", OnFocusOutForm, false); 
      } 
      else { 
       if (form.attachEvent) {  // IE before version 9 
        form.attachEvent ("onfocusin", OnFocusInForm); 
        form.attachEvent ("onfocusout", OnFocusOutForm); 
       } 
      } 
     } 
     else { 
      if (form.addEventListener) { // Firefox, Opera, Google Chrome and Safari 
        // since Firefox does not support the DOMFocusIn/Out events 
        // and we do not want browser detection 
        // the focus and blur events are used in all browsers excluding IE 
        // capturing listeners, because focus and blur events do not bubble up 
       form.addEventListener ("focus", OnFocusInForm, true); 
       form.addEventListener ("blur", OnFocusOutForm, true); 
      } 
     } 
    } 

    function OnFocusInForm (event) { 
     var target = event.target ? event.target : event.srcElement; 
     if (target) { 
      target.style.color = "red"; 
     } 
    } 
    function OnFocusOutForm (event) { 
     var target = event.target ? event.target : event.srcElement; 
     if (target) { 
      target.style.color = ""; 
     } 
    } 

</script> 

<body onload="Init()"> 
    <form id="myForm"> 
     User name: <input type="text" value="my name"/><br /> 
     E-mail: <input type="text" value="[email protected]"/> 
    </form> 
</body>

更新另一種方式，你可以做這樣的單獨控制

 document.addEventListener('DOMContentLoaded', function() { 
     document.querySelector('#checkboxname').addEventListener('focus', focusHandler); 
    }); 

    function focusHandler(){ 
    } 


    <input type="checkbox" id="checkboxname" name="checkboxname"/>

來源

2013-05-02 17:28:06

感謝您詳細的解答。這將如何工作複選框？用戶可以選中複選框而不是點擊它。我似乎無法得到與您提供的功能一起工作。 – TroyS 2013-05-02 17:52:27

它將適用於表單中的所有元素，並且event.target會爲您提供控件名稱..然後您可以使用event.target來執行您的活動 – 2013-05-02 17:56:58

剛剛更新了答案 – 2013-05-02 18:01:13

如何讓onfocus事件在firefox和chrome中啓用複選框

回答

相關問題