我现在一直在解决以下问题,并希望你们能指出我(可能是显而易见的)解决方案。
我有一个简单的Web应用程序,它输入一个输入字段(type =“text”)。页面加载时,光标已准备好接受输入。一旦用户导航(onBlur),AJAX部分就会启动,我会查找数据库中的代码,并根据结果右边的框变绿或保持红色。
在更改之后,我希望输入字段已清除并准备好接收新输入。清除字段确实有效,但将焦点设置为不起作用。我尝试了focus()和select(),没有去...我试图在setTimeout中折叠,没有去。使用当前代码,它在FF,chrome和IE中不起作用。我希望你们能给我一个提示。
这是网页代码:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function checkTicket(tno) {
var xmlhttp;
if (tno=='') {
document.getElementById('inside').innerHTML='0';
document.getElementById('validbox').style.backgroundColor='#FF0000';
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('inside').innerHTML=xmlhttp.responseText;
if (document.getElementById('inside').innerHTML=='1') {
document.getElementById('validbox').style.backgroundColor='#00FF00';
} else {
document.getElementById('validbox').style.backgroundColor='#FF0000';
}
set_focus();
}
}
xmlhttp.open("GET","check_eticket.php?t="+tno,true);
xmlhttp.send();
}
function set_focus() {
document.form.ticketnumber.value='';
document.form.ticketnumber.focus();
}
</script>
</head>
<body onLoad="set_focus()">
<div id="wrapper" style="position: absolute; top: 50%; height: 400px; margin-top: -200px; width: 99%;">
<div id="innerwrap" style="width: 75%; margin-left: auto; margin-right: auto;">
<div style="float: left; width: 50%; margin-left: auto; height: 400px; padding-top: 115px;">
<span style="font-size: 3em; font-weight: bold; text-align: center;">TOEGANGSCODE:<br /></span>
<form name="form">
<input name="ticketnumber" id="ticketnumber" type="text" onBlur="checkTicket(this.value)" size="11" style="font-size: 3.55em; font-weight: bold;" />
</form>
</div>
<div id="validbox" style="float: right; width: 50%; background-color: #FF0000; height: 400px; margin-right: auto;">
<div id="inside" style="display: none;">0</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:2)
问题实际上非常简单:页面的“视口”正在失去焦点。
网页上的所有“活动”元素(表单字段,锚点)都会收到“tabindex”。当您填写该字段并按“tab”时,焦点将移至下一个“活动”元素。
在您的页面上,没有“下一个”元素。然后,浏览器将焦点设置为浏览器界面中的下一个元素:在我的情况下(Firefox 14.01),下一个元素是浏览器顶部的选项卡。
此标签不是您网页的一部分。因此,我的浏览器会阻止该页面“窃取”焦点。
答案实际上非常简单:只需添加一个额外的活动元素即可。对于html4.01,以下标记可以获得焦点:A,AREA,BUTTON,INPUT,OBJECT,SELECT和TEXTAREA(参见Tab Index on div)。 html5规范告诉我你可以使用tabstop将任何html元素添加到这个列表中,但遗憾的是,这并没有(但是?)对我有用。
现在,我建议您在页面中添加一个锚点,如下面的解决方案所示。
<html>
<head>
<script type="text/javascript">
function checkTicket(tno) {
var xmlhttp;
if (tno=='') {
document.getElementById('inside').innerHTML='0';
document.getElementById('validbox').style.backgroundColor='#FF0000';
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('inside').innerHTML=xmlhttp.responseText;
if (document.getElementById('inside').innerHTML=='1') {
document.getElementById('validbox').style.backgroundColor='#00FF00';
} else {
document.getElementById('validbox').style.backgroundColor='#FF0000';
}
set_focus();
}
}
xmlhttp.open("GET","check_eticket.php?t="+tno,true);
xmlhttp.send();
}
function set_focus() {
document.form.ticketnumber.value='';
document.form.ticketnumber.focus();
}
</script>
</head>
<body onLoad="set_focus()">
<div id="wrapper" style="position: absolute; top: 50%; height: 400px; margin-top: -200px; width: 99%;">
<div id="innerwrap" style="width: 75%; margin-left: auto; margin-right: auto;">
<div style="float: left; width: 50%; margin-left: auto; height: 400px; padding-top: 115px;">
<span style="font-size: 3em; font-weight: bold; text-align: center;">TOEGANGSCODE:<br /></span>
<form name="form">
<input name="ticketnumber" id="ticketnumber" type="text" onBlur="checkTicket(this.value)" size="11" style="font-size: 3.55em; font-weight: bold;" />
</form>
</div>
<div id="validbox" style="float: right; width: 50%; background-color: #FF0000; height: 400px; margin-right: auto;">
<div id="inside" style="display: none;">0</div>
</div>
<a href="">bang!</a>
</div>
</div>
</body>
</html>