1

我现在一直对以下问题感到头疼，希望你们能指出我（可能是显而易见的）解决方案。

我有一个简单的 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>
4

1 回答 1

2

问题实际上很简单：页面的“视口”正在失去焦点。

网页上的所有“活动”元素（表单字段、锚点）都会收到一个“tabindex”。当您填写该字段并按“制表符”时，焦点将移至下一个“活动”元素。

在您的页面上，没有“下一个”元素。然后浏览器会将焦点设置到浏览器界面中的下一个元素：在我的例子中（Firefox 14.01），下一个元素是浏览器顶部的选项卡。

此选项卡不是您网页的一部分。因此，我的浏览器会阻止页面“窃取”焦点。

答案其实很简单：只需添加一个额外的活动元素。对于 html4.01，以下标签可以接收焦点：A、AREA、BUTTON、INPUT、OBJECT、SELECT 和 TEXTAREA（参见div 上的标签索引）。html5 规范告诉我，您可以使用制表符将任何 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>
于 2012-08-22T18:31:36.200 回答