Heim > Artikel > Web-Frontend > HTML5-Übungs- und Analysefokusmanagement (activeElement und hasFocus)

HTML5-Übungs- und Analysefokusmanagement (activeElement und hasFocus)

黄舟Original: 2017-02-10 14:57:281928Durchsuche

Heutzutage widmen Websites Menschen mit Behinderungen immer mehr Aufmerksamkeit. Viele Websites haben damit begonnen, praktische Kanäle für Menschen mit Sehbehinderung zu schaffen, um ihnen das Surfen im Internet zu erleichtern. Im Folgenden werde ich Ihnen einige Dinge zum Thema Fokusmanagement und Websites für Blinde vorstellen. Ich hoffe, dass es Ihnen hilfreich sein wird.

Im 21. Jahrhundert widmen Websites Menschen mit Behinderungen immer mehr Aufmerksamkeit, und andere Arten von Behinderungen sollten besser erwähnt werden. Wenn Menschen mit Sehschwäche auf der Website surfen, wissen sie es im Grunde nicht wie man stöbert. Menschen mit schlechter Sehkraft verlassen sich im Wesentlichen darauf, dass sie sich beim Durchsuchen der Website konzentrieren können, und verlassen sich beim Durchsuchen der Website hauptsächlich darauf, dass sie sich beim Lesen des Inhalts konzentrieren können. Daher ist Fokusmanagement besonders wichtig, wenn Websites für Menschen mit Sehbehinderung erstellt werden.

Nur weil es objektiv gesehen Menschen mit Sehschwäche gibt, hat HTML5 eine Funktion hinzugefügt, die bei der Verwaltung des DOM-Fokus hilft.

1. document.activeElement-Eigenschaft

Die Document.activeelement-Eigenschaft bezieht sich immer auf das Element im DOM, das aktuell den Fokus hat. Elemente erhalten den Fokus durch Benutzereingaben (normalerweise das Drücken der Tab-Taste), den Aufruf der focus()-Methode im Code und das Laden der Seite. Schauen wir uns zunächst ein kleines Beispiel an.

HTML-Code

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

JavaScript-Code

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

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

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

Wenn das Dokument gerade geladen wird, wird standardmäßig das document.activeelement mit dem document.body-Element gespeichert Zitat. Während des Ladens des Dokuments ist der Wert von document.activeelement null. Mit document.activeelement können Sie feststellen, ob das Dokument geladen ist.

　2. document.hasFocus()-Methode

Zusätzlich zum neu hinzugefügten document.activeelement-Attribut fügt HTML5 auch die document.hasfocus()-Methode hinzu. Mit dieser Methode wird ermittelt, ob das Dokument den Fokus hat. Schauen wir uns zunächst ein kleines Beispiel an.

HTML-Code

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

JavaScript-Code

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

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

Mit der hasFocus()-Methode können wir erkennen, ob das Dokument den Fokus erlangt hat, und wissen, ob der Benutzer dies getan hat Interaktion mit der Seite.

Das Abfragen des Dokuments, um zu erfahren, welches Element den Fokus erhalten hat, und die Feststellung, ob das Dokument den Fokus erhalten hat, sind zwei der wichtigsten Funktionen, um Barrierefreiheit für Webanwendungen bereitzustellen. Eines der Hauptmerkmale einer barrierefreien Webanwendung ist die richtige Fokusverwaltung, und genau zu wissen, welches Element den Fokus erhält, ist eine enorme Verbesserung. Zumindest müssen wir nicht mehr so viel raten wie früher. Schauen wir uns zunächst ein kleines Beispiel an.

HasFocus()-Anwendungsbeispiel

HTML-Code

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

JavaScript-Code

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";
	}

};

Das obige Beispiel nutzt hasFocus() vollständig aus Methode, um festzustellen, ob der Fokus erreicht wurde. Dadurch können wir auch den Charme der hasFocus()-Methode und den Nutzen der Fokusverwaltung spüren. Browser, die diese hasFocus()-Methode und das ActiveElement-Attribut implementieren können, sind: FireFox 3+, Safari 4+, Chrome, Opera 8+ und IE 4+.

Der eigentliche HTML5-Kampf und die Analyse des Fokusmanagements (activeElement und hasFocus) werden hier mit allen geteilt. Die Barrierefreiheit von Webanwendungen in China muss noch weiterentwickelt werden. Wenn Sie das Fokusmanagement (activeElement und hasFocus) gut beherrschen, können Sie grundsätzlich die Barrierefreiheit von Webanwendungen erreichen. Vielen Dank für Ihre Unterstützung für Menglong Station. Für weitere Updates zu HTML5 beachten Sie bitte die relevanten Updates zum tatsächlichen Kampf und zur Analyse von HTML5 in Menglong Station.

Das Obige ist der Inhalt des tatsächlichen HTML5-Kampfes und der Analyse des Fokusmanagements (activeElement und hasFocus). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tatsächlicher HTML5-Kampf und Analyse des classList-AttributsNächster Artikel：Tatsächlicher HTML5-Kampf und Analyse des classList-Attributs

In Verbindung stehende Artikel

Mehr sehen