Gestion des focus pratiques et analyses HTML5 (activeElement et hasFocus)

黄舟

Libérer： 2017-02-10 14:57:28

original

1971 Les gens l'ont consulté

De nos jours, les sites Web accordent de plus en plus d'attention aux personnes handicapées. De nombreux sites Web ont commencé à créer des canaux pratiques pour les personnes malvoyantes afin de leur faciliter la navigation sur le Web. Ci-dessous, je vais vous présenter quelques éléments sur la gestion de la concentration et les sites Web pour les personnes aveugles. J'espère que cela vous sera utile.

Au 21e siècle, les sites Web accordent de plus en plus d'attention aux personnes handicapées, et il est préférable de mentionner d'autres types de handicaps. Si les personnes malvoyantes consultent le site Web, elles ne le savent pratiquement pas. comment naviguer. Les personnes malvoyantes dépendent essentiellement de leur concentration pour parcourir le site Web, et principalement de leur concentration pour lire le contenu afin de parcourir le site Web. La gestion de la concentration est donc particulièrement importante lors de la création de sites Web destinés aux personnes malvoyantes.

Tout simplement parce que les personnes malvoyantes existent objectivement, HTML5 a ajouté une fonction pour aider à gérer le focus DOM.

1. Propriété document.activeElement

La propriété Document.activeelement fait toujours référence à l'élément du DOM qui a actuellement le focus. Les éléments obtiennent le focus grâce à la saisie de l'utilisateur (généralement en appuyant sur la touche Tab), en appelant la méthode focus() dans le code et en chargeant la page. Regardons d’abord un petit exemple.

Code HTML

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

Copier après la connexion

Code JavaScript

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

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

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

Copier après la connexion

Par défaut, lorsque le document vient d'être chargé, le document.activeelement est enregistré avec l'élément document.body citation. Lors du chargement du document, la valeur de document.activeelement est nulle. Vous pouvez utiliser document.activeelement pour déterminer si le document est chargé.

　2. Méthode document.hasFocus()

En plus du nouvel attribut document.activeelement ajouté, HTML5 ajoute également la méthode document.hasfocus(). Cette méthode est utilisée pour déterminer si le document a le focus. Regardons d’abord un petit exemple.

Code HTML

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

Copier après la connexion

Code JavaScript

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

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

Copier après la connexion

Avec la méthode hasFocus(), nous pouvons détecter si le document a gagné en focus et savoir si l'utilisateur a Interagir avec la page.

L'utilisation la plus importante de l'interrogation d'un document pour savoir quel élément a reçu le focus et de déterminer si un document a reçu le focus est de fournir l'accessibilité aux applications Web. L'une des principales caractéristiques d'une application Web accessible est une bonne gestion du focus, et savoir exactement quel élément a le focus est une énorme amélioration. Au moins, nous n'avons plus besoin de deviner autant qu'avant. Regardons d’abord un petit exemple.

Exemple d'application HasFocus()

Code HTML

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

Copier après la connexion

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

};

Copier après la connexion

L'exemple ci-dessus utilise pleinement hasFocus() méthode pour déterminer si la mise au point a été obtenue. Cela nous permet également de ressentir le charme de la méthode hasFocus() et l'utilité de la gestion du focus. Les navigateurs pouvant implémenter cette méthode hasFocus() et l'attribut activeElement sont : FireFox 3, Safari 4, Chrome, Opera 8 et IE 4.

Les combats réels HTML5 et l'analyse de la gestion du focus (activeElement et hasFocus) sont partagés ici avec tout le monde. L'accessibilité des applications web en Chine reste à développer. Si vous maîtrisez bien la gestion des focus (activeElement et hasFocus), vous pouvez en gros parvenir à l'accessibilité des applications web. Merci pour votre soutien à Menglong Station. Pour plus de mises à jour sur HTML5, veuillez prêter attention aux mises à jour pertinentes du combat réel et de l'analyse de HTML5 dans Menglong Station.

Ce qui précède est le contenu du combat réel HTML5 et de l'analyse de la gestion du focus (activeElement et hasFocus). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !