在IE中,我使用的是onfocusin事件,所有操作均符合复选框的预期,但是onfocusin仅适用于IE,不适用于其他浏览器。另外,无论您使用哪种浏览器,onfocus都不适用于复选框。在这里我缺少什么吗?下面的示例(仅在即启动复选框)我正在使用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>

最佳答案

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

07-24 09:50
查看更多