5

HTML フォームにはテキスト フィールドが 1 つしかありません。ユーザーがテキストを入力し、Enter キーを押してフォームを送信すると、フォームがリロードされます。主な用途はバーコード読み取りです。次のコードを使用して、フォーカスをテキスト フィールドに設定します。

<script language="javascript">
    <!--
            document.getElementById("#{id}").focus()
    //-->
</script>

ほとんどの場合は機能します (誰も画面/マウス/キーボードに触れていない場合)。

ただし、ユーザーがブラウザー ウィンドウ内のフィールドの外側 (白い空白部分) をクリックすると、カーソルがなくなります。単一フィールドの HTML フォームで、カーソルが失われないようにするにはどうすればよいですか? または、カーソルが失われた後にフィールド内でカーソルを再フォーカスする方法は? どうも！

4

3 に答える 3

10

Darin の答えは正しいですが、Firefox では機能しません。Firefox でもフォーカスを取り戻したい場合は、イベントの後まで遅らせる必要があります。

<input onblur="var that= this; setTimeout(function() { that.focus(); }, 0);">

または、より良いのは、JavaScript から割り当てられたものです。

<script type="text/javascript">
    var element= document.getElementById('foo');
    element.focus();
    element.onblur= function() {
        setTimeout(function() {
            element.focus();
        }, 0);
    };
</script>

ただし、これを行わないことを強くお勧めします。テキスト ボックスの外側をクリックしてそのテキスト ボックスからフォーカスを削除することは、完全に正常なブラウザーの動作であり、正当な用途に使用できます (たとえば、ctrl-F の検索ポイントを設定したり、ドラッグ選択を開始したりするなど)。この予想される動作を台無しにする正当な理由がある可能性はほとんどありません。

于 2010-04-09T08:53:00.467 に答える
2 
<input type="text" name="barcode" onblur="this.focus();" />
于 2010-04-09T08:31:15.690 に答える
1

イベントをフックしてblur、フィールドを再びフォーカスすることができます。これを行うためのユースケースはほとんどありませんが、あなたのケースはその1つかもしれません. おそらく、または同様の方法で再フォーカスをスケジュールする必要があることに注意してください。ハンドラー自体setTimeoutの中でそれを行うことはできません。blur

マークアップに影響を与えずにこれを行う場合、Prototype、jQuery、Closureなどのライブラリを使用すると最も簡単ですが、それらを使用しなくても (もちろん) 実行できます。ブラウザの違いを自分で処理する必要があります。たとえば、プロトタイプを使用すると、次のようになります。

document.observe("dom:loaded", function() {
    var elm = $('thingy');

    elm.focus();
    elm.observe('blur', function() {
        refocus.defer(elm);
    });

    function refocus(elm) {
        elm.focus();
    }
});

マークアップに影響を与えても構わない場合は、onblur属性を使用できます。たとえば、これは少なくとも IE、Firefox、および Chrome (おそらく他のもの) で動作します。

HTML:

<input type='text' id='thingy' onblur="refocus(this);">

脚本：

function refocus(elm) {

    setTimeout(go, 0);

    function go() {
        elm.focus();
    }
}
于 2010-04-09T08:31:03.933 に答える