優れたユーザーエクスペリエンスのために、Webサイト/Webアプリのアクセシビリティと可用性、および機能が重要です。
私たちのウェブサイトがうまく実行されている/経験が良い場合、ユーザーはそれを認識していませんが、私たちがうまくいかないときは間違いなくそれを感じるでしょう。 アプリケーションの可用性とアクセシビリティの重要な部分は、入力フォーカスの処理ですが、これは開発者がしばしば見落とすもう1つのポイントです。
入力フォーカスの処理が不十分な例：リンクをクリックした後、ウィンドウを開きますが、ウィンドウの任意の要素にカーソルを集中させません。 さらに悪いことに、モーダルウィンドウの要素に焦点を当てますが、閉じた後は焦点が戻りません。 理想的には、リンクがトリガーされると参照が保存され、カーソルは新しいウィンドウに焦点を合わせ、ウィンドウが閉じるとカーソルを戻します。
しかし、現在のドキュメントに焦点を合わせる要素を取得できるように、入力カーソルが現在どの要素にあるのかわからない場合はどうなりますか？
JavaScript
document.activeElementを使用するのは、現在選択されている要素を見つけるのに簡単です。
コードコピーは次のとおりです。
var focusedelement = document.activeElement;
/*たとえば、例：
var triggerelement = document.activeElement;
mymodal = new mymodal（{
onopen：function（）{
this.container.focus（）;
}、
onclose：function（）{
triggerelement.focus（）;
}
}）;
*/
このプロパティは、通常の入力要素で利用可能であるだけでなく、フォームフィールドまたは<a>タグリンクも含まれていますが、Tabindex属性セットのある要素も使用できます。
Document.ActiveElementが好きな理由は、イベントリスニングやリスナーを使用して要素を追跡してフォーカスを取得する必要がないことです。いつでもこのプロパティを取得できます。 もちろん、そのような機能を使用する前に、クロスブラウザーまたはレース条件にバグがあるかどうかにかかわらず、多くのテストを行う必要があります。 全体として、私はそれに非常に満足しており、それが非常に信頼できると感じています！