どのDOM要素がフォーカスされているかを調べるにはどうしたらいいですか?

JavaScriptで、どの要素が現在フォーカスされているかを調べたいと思っています。DOMを調べてみましたが、まだ必要なものが見つかりません。これを行う方法はありますか?

私がこれを探していた理由は

矢印やenterのようなキーで、入力要素のテーブルを移動させようとしています。Tabは動作しますが、Enterと矢印はデフォルトでは動作しないようです。キー操作の部分は設定しましたが、今度はイベント処理関数でフォーカスを移動させる方法を考えなければなりません。

ソリューション

すべての主要ブラウザでサポートされているdocument.activeElement`を使用してください。

これまでは、どのフォームフィールドにフォーカスがあるかを調べようとしても、調べることができませんでした。古いブラウザでの検出をエミュレートするには、すべてのフィールドに「focus」イベントハンドラを追加し、最後にフォーカスされたフィールドを変数に記録します。最後にフォーカスされたフィールドの blur イベントが発生したら、変数をクリアする "blur" ハンドラを追加します。

関連リンク

解説 (11)

JWさんがおっしゃるように、少なくともブラウザに依存しない方法では、現在フォーカスされている要素を見つけることはできません。しかし、あなたのアプリがIEのみの場合(いくつかはそうですが...)、次の方法で見つけることができます。

document.activeElement

EDIT: IEがすべて間違っていたわけではないようです。これはHTML5ドラフトの一部で、少なくともChrome、Safari、Firefoxの最新バージョンではサポートされているようです。

解説 (8)

私が最終的にたどり着いた解決策をお伝えするために、ここに書いておきます。

document.activeInputAreaというプロパティを作成し、jQueryのHotKeysアドオンを使用して、矢印キー、tab、enterのキーボードイベントをトラップし、入力要素をクリックしたときのイベントハンドラを作成しました。

そして、フォーカスが変わるたびにactiveInputAreaを調整し、そのプロパティを使って自分がどこにいるのかを知ることができるようにしました。

システムにバグがあって、フォーカスが思った場所にない場合、正しいフォーカスを復元するのは非常に難しいので、これを台無しにするのは簡単です。

解説 (0)