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

優れたユーザー エクスペリエンスを実現するには、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();
}; 🎜> */


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

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