如何让 onfocus 事件触发 firefox 和 chrome 中的复选框答案

【问题标题】：How to get the onfocus event to fire for checkbox in firefox and chrome如何让 onfocus 事件触发 firefox 和 chrome 中的复选框
【发布时间】：2013-05-02 17:18:23
【问题描述】：

在 IE 中，我使用了 onfocusin 事件，并且复选框的一切正常，但 onfocusin 仅适用于 IE，不适用于其他浏览器。此外，无论您使用哪种浏览器，onfocus 都不适用于复选框。我在这里缺少什么吗？下面的示例（复选框仅在 ie 中触发）我使用的是 asp.net 4.0

<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>

【问题讨论】：

标签： javascript asp.net visual-studio-2010 firefox web-applications

【解决方案1】：

在 Opera、Google 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="myname@mydomain.com"/>
    </form>
 </body>

更新另一种方式，您可以像这样进行个人控制

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

    function focusHandler(){
     }


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

【讨论】：

感谢您的详细解答。这对复选框有什么作用？用户可以选择进入复选框而不是单击它。我似乎无法让它与您提供的功能一起使用。
它适用于表单中的所有元素，并且 event.target 会为您提供控件名称.. 然后您可以使用 event.target 来执行您的活动
通过对 CheckBox 进行更广泛的测试，我发现这在 Firefox 和 IE 中有效，但在 Chrome 和 Safari 中无效。
调用init方法增加body的eventlistener onload
我有如你所说。除了 Chrome 和 Safari 中的复选框外，所有浏览器都可以正常启动