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