HTML5-Übungs- und Analysefokusmanagement (activeElement und hasFocus)
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)!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
Tabellenrahmen in HTML
Sep 04, 2024 pm 04:49 PM
Anleitung zum Tabellenrahmen in HTML. Hier besprechen wir verschiedene Möglichkeiten zum Definieren von Tabellenrändern anhand von Beispielen für den Tabellenrand in HTML.
Verschachtelte Tabelle in HTML
Sep 04, 2024 pm 04:49 PM
Dies ist eine Anleitung für verschachtelte Tabellen in HTML. Hier diskutieren wir anhand der entsprechenden Beispiele, wie man eine Tabelle innerhalb der Tabelle erstellt.
HTML-Rand links
Sep 04, 2024 pm 04:48 PM
Anleitung zum HTML-Rand links. Hier besprechen wir einen kurzen Überblick über HTML margin-left und seine Beispiele sowie seine Code-Implementierung.
HTML-Tabellenlayout
Sep 04, 2024 pm 04:54 PM
Leitfaden zum HTML-Tabellenlayout. Hier besprechen wir die Werte des HTML-Tabellenlayouts zusammen mit den Beispielen und Ausgaben im Detail.
HTML-Eingabeplatzhalter
Sep 04, 2024 pm 04:54 PM
Leitfaden für HTML-Eingabeplatzhalter. Hier besprechen wir die Beispiele für HTML-Eingabeplatzhalter zusammen mit den Codes und Ausgaben.
HTML-geordnete Liste
Sep 04, 2024 pm 04:43 PM
Leitfaden zur HTML-geordneten Liste. Hier besprechen wir auch die Einführung von HTML-geordneten Listen und Typen sowie deren Beispiele
Text in HTML verschieben
Sep 04, 2024 pm 04:45 PM
Anleitung zum Verschieben von Text in HTML. Hier besprechen wir eine Einführung, wie Marquee-Tags funktionieren, mit Syntax und Beispielen für die Implementierung.
HTML-Onclick-Button
Sep 04, 2024 pm 04:49 PM
Anleitung zum HTML-OnClick-Button. Hier diskutieren wir deren Einführung, Funktionsweise, Beispiele und Onclick-Events in verschiedenen Veranstaltungen.
