1. document.activeElement 属性

HTML コード

JavaScript コード

2. document.hasFocus() メソッド

hasFocus()アプリケーションの簡単な例

HTMLコード

JavaScriptコード

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 の実践と分析のフォーカス管理 (activeElement と hasFocus)

黄舟

Feb 10, 2017 pm 02:57 PM

現在、Web サイトは障害を持つ人々にますます注目しており、視覚障害のある人が Web を閲覧できるようにするための便利なチャンネルを作成し始めています。以下に視覚障害者向けの集中力管理とウェブサイトについていくつか紹介しますので、ご参考になれば幸いです。

21 世紀のウェブサイトは、障害のある人々にますます注目を集めています。視覚障害のある人がウェブサイトを閲覧しようとしても、基本的には閲覧方法がわかりません。視力が悪い人は、基本的に Web サイトを閲覧するために焦点を合わせることに依存しており、Web サイトを閲覧するために主にコンテンツを読むために焦点を合わせることに依存しています。したがって、視力の弱い人向けの Web サイトを作成する場合、フォーカス管理は特に重要です。

客観的には視力の悪い人が存在するからこそ、HTML5ではDOMのフォーカス管理を支援する機能が追加されました。

1. document.activeElement 属性

Document.activeelement 属性は、常に現在フォーカスがある DOM 内の要素を参照します。要素は、ユーザー入力 (通常は Tab キーを押す)、コード内での focus() メソッドの呼び出し、およびページの読み込みを通じてフォーカスを取得します。まずは小さな例を見てみましょう。

HTML コード

<body id="body">
  <input id="btn" type="button" value="梦龙小站" />
</body>

ログイン後にコピー

JavaScript コード

window.onload = function(){
	var btn = document.getElementById("btn");

	//页面加载获取焦点
	alert(document.activeElement.id) // body
	
	//调用focus()方法获取焦点
	btn.focus();

	alert(document.activeElement.id) // btn
};

ログイン後にコピー

デフォルトでは、ドキュメントがロードされたばかりの場合、document.body 要素への参照は document.activeelement に保存されます。ドキュメントのロード中、document.activeelement の値は null です。 document.activeelement を使用して、ドキュメントがロードされているかどうかを判断できます。

2. document.hasFocus() メソッド

HTML5 では、新しく追加された document.activeelement 属性に加えて、 document.hasfocus() メソッドも追加されています。このメソッドは、ドキュメントにフォーカスがあるかどうかを判断するために使用されます。まずは小さな例を見てみましょう。

HTML コード

<body id="body">
  <input id="btn" type="button" value="梦龙小站" />
</body>

ログイン後にコピー

JavaScript コード

window.onload = function(){
	var btn = document.getElementById("btn");

	alert(document.hasFocus())  //true
};

ログイン後にコピー

hasFocus() メソッドを使用すると、ドキュメントがフォーカスを取得したかどうかを検出し、ユーザーがページを操作しているかどうかを知ることができます。

ドキュメントをクエリしてどの要素がフォーカスを受け取ったのかを知り、ドキュメントがフォーカスを受け取ったかどうかを判断する最も重要な用途は、Web アプリケーションにアクセシビリティを提供することです。アクセシブルな Web アプリケーションの主な特徴の 1 つは適切なフォーカス管理であり、どの要素がフォーカスを取得するかを正確に把握できるようになったことで、少なくとも以前ほど推測する必要がなくなりました。まずは小さな例を見てみましょう。

hasFocus()アプリケーションの簡単な例

HTMLコード

<p id="meng">鼠标放上来</p>
<p id="long" style="display:none;">获取焦点了</p>

ログイン後にコピー

JavaScriptコード

window.onload = function(){
	var oMeng = document.getElementById("meng");
	var oLong = document.getElementById("long");

	oMeng.onmouseover = getFocus;
	oMeng.onmouseout = loseFocus;

	function getFocus(){
		if (document.hasFocus())
		{
			oLong.style.display = "block";
		}
	}
	function loseFocus(){
		oLong.style.display = "none";
	}

};

ログイン後にコピー

上記の例は、hasFocus()メソッドを駆使してフォーカスが取得されているかどうかを判定しています。このことからもhasFocus()メソッドの魅力とフォーカス管理の有用性を実感することができます。この hasFocus() メソッドと activeElement 属性を実装できるブラウザは、FireFox 3 以降、Safari 4 以降、Chrome、Opera 8 以降、および IE 4 以降です。

HTML5の実戦とフォーカス管理(activeElementとhasFocus)の解析をここでみんなで共有します。中国における Web アプリケーションのアクセシビリティはまだ開発の必要があります。フォーカス管理 (activeElement と hasFocus) をしっかりマスターすれば、基本的に Web アプリケーションのアクセシビリティを実現できます。蒙龍ステーションのサポートに感謝します。HTML5 に関する最新情報については、蒙龍ステーションでの実際の戦闘と HTML5 の分析に関する最新情報に注目してください。

上記は HTML5 の実戦とフォーカス管理 (activeElement と hasFocus) の分析の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) をご覧ください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。