JS を使用してフォーカス要素 code_javascript スキルを取得する-jsチュートリアル-php.cn

JS を使用してフォーカス要素 code_javascript スキルを取得する

WBOY

リリース： 2016-05-16 16:54:47

オリジナル

1440 人が閲覧しました

優れたユーザーエクスペリエンスを実現するには、Web サイト/Web アプリのアクセシビリティ、使いやすさ、機能が非常に重要です。
ユーザーは、私たちのウェブサイトがうまく運営されているときやエクスペリエンスが素晴らしいときは気づきませんが、私たちの仕事がうまくいかなかったときは間違いなくそれを感じます。アプリケーションの使いやすさとアクセシビリティの重要な要素は入力フォーカスの処理ですが、開発者が見落としがちな要素です。

入力フォーカスの不適切な処理の例: リンクをクリックした後にウィンドウを開きますが、ウィンドウ内のどの要素にもカーソルをフォーカスしていません。さらに悪いことに、モーダルウィンドウ内の要素にフォーカスしても、閉じた後にフォーカスが戻りません。理想的には、リンクがトリガーされたときに参照を保存し、新しいウィンドウにカーソルをフォーカスし、ウィンドウが閉じられたときにカーソルを元に戻します。

しかし、入力カーソルが現在どの要素上にあるかわからない場合はどうすればよいでしょうか? document.activeElement プロパティを使用して、現在のドキュメント内のフォーカスされた要素を取得できます。

JavaScript

document.activeElement を使用すると、現在選択されている要素を簡単に見つけることができます:

コードをコピーしますコードは次のとおりです。

var focusElement = document.activeElement;

/* 例:
vartriggerElement = document.activeElement;
myModal = new MyModal({
onOpen : function () {
this.container.focus();
},
onClose: function() {
triggerElement.focus();
}; 🎜> */

この属性は、フォームフィールドやタグリンクなどの通常の入力要素だけでなく、tabIndex 属性が設定されている要素でも使用できます。

document.activeElement の気に入っている点は、どの要素にフォーカスがあるかを追跡するためにイベントリスナーやデリゲートリスナーを使用する必要がないことです。このプロパティはいつでも取得できます。もちろん、そのような機能を使用する前に、クロスブラウザーや競合状態にバグがないかどうか、広範なテストを行う必要があります。全体として、とても満足していますし、とても信頼できると思います！