Javascript 在使用AJAX刷新另一个div后将焦点设置在textfield上
我一直在为以下问题绞尽脑汁,希望你们能给我指出一个可能显而易见的解决方案 我有一个简单的web应用程序,它接受输入字段type=text。当页面加载时,光标准备接受输入。一旦用户导航到AJAX部分,我就会在数据库中查找代码,根据结果,右边的框变为绿色或保持红色 更改之后,我希望输入字段被清除,并准备好接收新的输入。清除字段确实有效,但将焦点设置为该字段则无效。我试着聚焦和选择,不去。。。我试着在一个设定的时间内折叠,暂停,不去。目前的代码在FF、chrome和IE中不起作用。我希望你们能给我一个提示 这是网页代码:Javascript 在使用AJAX刷新另一个div后将焦点设置在textfield上,javascript,html,ajax,Javascript,Html,Ajax,我一直在为以下问题绞尽脑汁,希望你们能给我指出一个可能显而易见的解决方案 我有一个简单的web应用程序,它接受输入字段type=text。当页面加载时,光标准备接受输入。一旦用户导航到AJAX部分,我就会在数据库中查找代码,根据结果,右边的框变为绿色或保持红色 更改之后,我希望输入字段被清除,并准备好接收新的输入。清除字段确实有效,但将焦点设置为该字段则无效。我试着聚焦和选择,不去。。。我试着在一个设定的时间内折叠,暂停,不去。目前的代码在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>
问题其实很简单:页面的视口正在失去焦点 网页上的所有活动元素表单字段、锚定接收tabindex。填写字段并按tab键时,焦点将移到下一个活动元素 在您的页面上,没有下一个元素。然后浏览器将焦点设置到浏览器界面中的下一个元素:在我的例子中,Firefox 14.01,下一个元素是浏览器顶部的选项卡 此选项卡不是您网页的一部分。因此,我的浏览器可以防止页面夺回焦点 答案其实很简单:只需添加一个额外的活动元素。对于html4.01,以下标记可以接收焦点:A、区域、按钮、输入、对象、选择和文本区域。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>
尝试setTimeoutfunction{document.form.ticketnumber.focus;},1;值的更改可能会触发浏览器中的某些操作,从而导致焦点丢失。我使用最新版本的FF和IE进行了尝试,效果不错。如果你使用FF,那么我猜你也使用firebug?如果将控制台设置为显示严格的错误消息并启用show XMLHttpRequest,可能会发现一些问题。请尝试jQuery,将此链接用作示例[[1]当前位置我怀疑我只是错过了一些明显的东西…我在IE中看到了让我的地址栏被选中的行为相当好。但仍然没有听到DIV没有获得焦点的声音。