-1

ページに複数のタブがある検索ボックスがある場合、タブの1つが常に選択されます。デフォルトのタブが選択されているか、ユーザーがタブを変更しました。いずれの場合も、ユーザーがキーワードの入力を開始できるように、選択したタブの検索入力ボックスには常にキーボードフォーカスが必要です。

例： http：//www.lib.umd.edu/の検索ボックス

別のタブがクリックされたときに、入力ボックスにフォーカスを合わせる方法を知っていますか？最初のタブで動作するようになりましたが、別のタブをクリックするとフォーカスが失われます。

私が使用しているスクリプト：

<script type="text/javascript" language="JavaScript">
    document.forms[''].elements[''].focus();
</script>
4

2 に答える 2

1

コード スニペット

特定の要素にフォーカスを設定するには、フォーカスを受け取る要素を指定する必要があります。あなたのスニペットには、この仕様がありません:

document.forms[''].elements[''].focus();

必要に応じて、次の行を使用できます:document.getElementById("DuringSearch").focus(); DuringSearchは、フォーカスを受け取る必要がある入力要素の ID です。<input id="DuringSearch" type="text">

解決する必要がある問題は、クリックされたタブに基づいて ID を変更することです。これを実現するにはいくつかの方法があります。以前の投稿では、data-tab という名前の属性が使用されています。

タブを接続して入力にフォーカスする例

タブのクリックにイベント ハンドラーをアタッチするには、document.ready で (jQuery を使用して) 次のようにします。

//  add event handler for click on tab
$("#tabs li").click(function () {                    
    loadTabs(this);
    setFocusOnInput(this);
    return false;
});

タブをクリックすると、添付イベントが発生し、loadTabs と setFocusOnInput の 2 つの関数が実行されます。

フォーカスを設定するには、その入力ボックスの ID を知る必要があります。私の例では、属性を使用していますdata-tab

<li data-tab="Before">
    <a href="#Before">Before</a>
</li>

私の例では、次の関数を使用します。

function setFocusOnInput(_this){
    var tab = $(_this).attr("data-tab"); 
    var searchId = tab + "Search"
    console.log("_this:", _this);   
    document.getElementById(searchId).focus();        
}

詳細については、以前の投稿を参照してください。

知りたいことを詳しく教えてください。一般的な配線方法、または特定のケースでの配線方法を知りたいですか?

于 2012-11-01T18:18:17.337 に答える