Question

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

Answer 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"/>

如何在firefox和chrome中为onfocus事件触发复选框

1 个答案: