web-dev-qa-db-ja.com

キーボードフォーカスを<div>に設定します

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

<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>タグは、フォーカスを直接設定できません。そのため、次の関数で呼び出しているIDを持つ空の<a>タグを配置します。

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

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

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

私がこれを達成する方法はありますか？

javascriptjqueryhtmlsetfocus
40
webdad3

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

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

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

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

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

94
roberkules

Divを動的に生成する関数は、最後のdivの出力後、scriptにフォーカスするdivあなたが望むdiv。各divにIDを割り当てるので、セットから選択できます。

Response.Write "
<script language='text/javascript'>
document.getElementById('div#').scrollIntoView();
</script>
"
1
Lucent Fox

Divにフォーカスすることはできません。入力に集中するということですか？

とにかく、短いスクリプトタグを含めて、HTMLに何かを集中させることができます。スクリプトをdivの直後、またはdiv内に配置するだけです。

0
Ariel

生成されるたびにdivにフォーカスしたいのですか？これらを調査してみてください

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

そして

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

キーを押すと..

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

afaik divやその他の要素は、Wikiのようなものに焦点を当てることができます。

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

そこに自動的にスクロールします。どうしたらいいのかわかりません。

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

0
kapitanluffy

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

<div tabindex="0" >
    <button onclick="element.parentNode.focus();"/>
</div>
0
IgniteCoders

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

0
Mrchief

getElementsByClassName を使用できます

<div tabindex="0" class="to-focus">TEXT</div>
<script> document.getElementsByClassName('to-focus')[0].focus()</script>
0
Joe