1

私は今、次の問題に頭を悩ませています。皆さんが私に（おそらく明白な）解決策を教えてくれることを願っています。

入力フィールド（type = "text"）を入力する単純なWebアプリケーションがあります。ページが読み込まれると、カーソルは入力を受け入れる準備ができています。ユーザーが（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

問題は実際には非常に簡単です。ページの「ビューポート」がフォーカスを失っています。

Webページ上のすべての「アクティブな」要素（フォームフィールド、アンカー）は「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 に答える