javascript - How to get the onfocus event to fire for checkbox in firefox and chrome -
in ie using onfocusin event , works expected checkbox onfocusin works ie , not other browsers. onfocus doesn't work checkbox's either no matter browser in. there i'm missing here? sample below ( check box fires in ie) using 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>
in opera, google chrome , safari, use domfocusin event instead of onfocusin event.
in firefox, if need detect whether child of element gets focus, use capturing listener onfocus event.
to detect when element loses focus, use onblur, onfocusout , domfocusout events.
function init () { var form = document.getelementbyid ("myform"); if ("onfocusin" in form) { // internet explorer // attachevent method can used in ie9, // want use cross-browser addeventlistener method if possible if (form.addeventlistener) { // ie 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 , safari // since firefox not support domfocusin/out events // , not want browser detection // focus , blur events used in browsers excluding ie // capturing listeners, because focus , blur events not bubble 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> updated way can individual control
document.addeventlistener('domcontentloaded', function () { document.queryselector('#checkboxname').addeventlistener('focus', focushandler); }); function focushandler(){ } <input type="checkbox" id="checkboxname" name="checkboxname"/>
Comments
Post a Comment