44

次のコードスニペットがあります。

<div id="listbox1div" style="z-index:95; background:white; overflow-y:auto; overflow-x:hidden; width:240; height:314px;">
<a id="focusLink2"></a>
<table id="ptObj_listbox1...

要素を動的に構築しているページがあり<div>ます（上記のように）。これ<div>により、メイン画面の上部にデータが表示されます。ページがdivを生成するときに、フォーカスを設定したいと思います。divがいつ生成されるかわからないため、bodyタグにonLoad関数を配置できません。

タグに直接フォーカスを設定する<div>ことはできません。<a>そこで、次の関数で呼び出しているIDを持つ空のタグを配置します。

function setTableFocus(count){
        var flinkText = 'focusLink'+count;
       document.getElementById(flinkText).focus();
}

エラーは発生せず、ページが表示されたときに（アラートを介して）関数が呼び出されていることがわかります。ただし、矢印キーまたはEnterボタンを使用すると、ページ全体が移動します（データを表示しているdivも移動しません）。

（マウスを使用して）テーブル要素の1つをクリックしたとき。その後、キーダウンイベントが機能し始めます。私がこれをしたいのは、データをユーザーに提示し、自動的にキーボードで駆動することです。

誰かが私がこれを達成する方法について何か提案がありますか？

4

7 に答える 7

99

属性を追加すると、divフォーカス可能にすることができtabindexます。

参照：http ：//snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex

tabindex値は、いくつかの興味深い動作を可能にします。

  • 「-1」の値を指定すると、要素をタブで移動することはできませんが、プログラムで要素にフォーカスを指定できます（element.focus（）を使用）。
  • 値0を指定すると、要素はキーボードを介してフォーカスされ、ドキュメントのタブフローに分類されます。
  • 0より大きい値は優先度レベルを作成し、1が最も重要です。

更新：http：//jsfiddle.net/roberkules/sXj9m/に簡単なデモを追加しました

于 2011-07-24T19:50:28.283 に答える
2

divを動的に生成する関数には、フォーカスするdivを知るために使用できるコンテキストがあります。最後のdivが、目的のdivにフォーカスするscrollTo（）を含むスクリプトを出力した後です。各divにIDを割り当てると、セットから選択できるようになります。

Response.Write "
<script language='text/javascript'>
document.getElementById('div#').scrollIntoView();
</script>
"
于 2011-07-19T21:20:57.940 に答える
0

生成されるたびにdivに焦点を合わせたいということですか？これらを調べてみてください

http://api.jquery.com/focus/

と

http://api.jquery.com/live/

とキーを押すために..

http://api.jquery.com/keypress/

afaik divやその他の要素は、ウィキのように、ある種のフォーカスを持つことができます。

http://en.wikipedia.org/wiki/JavaScript#Cross-site_vulnerabilities

そこで自動的にスクロールします。方法がわかりません。

動的に生成されたdivとテーブルについては、jqueryのlive（）関数を使用できます

于 2011-07-26T21:50:19.057 に答える
0

divに焦点を合わせることができません。入力に焦点を合わせるという意味ですか？

とにかく、短いスクリプトタグを含めて、HTML内で何かに焦点を合わせることができます。つまり、スクリプトをdivの直後に配置するか、div内に配置するだけです。

于 2011-07-19T21:21:46.433 に答える
0

あなたはasp機能を制御していますか？はいの場合、それはフォーカスを設定するのに最も簡単な場所です。それ以外の場合は、イベントをリッスンしDOMNodeInserted（注：ブラウザーのサポートは異なる場合があります）、div適切な条件に基づいてフォーカスを（またはその子）に設定できます。

于 2011-07-19T21:25:39.947 に答える
0

getElementsByClassNameを使用できます

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>
于 2011-07-19T21:26:28.327 に答える
0

私は次のことをしてそれを解決します：

<div tabindex="0" >
    <button onclick="element.parentNode.focus();"/>
</div>
于 2014-08-08T14:28:39.857 に答える