.focus () est utilisé pour se concentrer sur des éléments interactifs, tels que la concentration automatique de la zone d'entrée après le chargement de la page ou le saut de la mise au point lorsque la vérification du formulaire échoue; .blur () est utilisé pour supprimer l'objectif, tel que l'effacement de l'objectif lors de l'annulation du point culminant après la soumission du formulaire ou la fermeture de la fenêtre contextuelle; Lorsque vous l'utilisez, assurez-vous que l'élément est focalisé et a été inséré dans le DOM, faites attention à la cohérence du comportement terminal mobile et évitez les appels fréquents qui provoquent une gigue de mise au point ou un défilement de page anormal.

Parfois, l'interaction de la page nous oblige à contr?ler activement l'état de mise au point de l'élément, comme nous concentrer automatiquement sur la zone d'entrée, en remettant la mise au point vers le bouton lors de la fermeture de la fenêtre contextuelle, etc. Pour le moment, vous devez utiliser les méthodes DOM .focus() et .blur() .

Cependant, ces deux méthodes semblent simples, et il y a encore des détails qui doivent être accordés à une utilisation réelle, en particulier en termes de comportement et d'accessibilité différents du navigateur.

Quand dois-je utiliser .focus()

L'utilisation la plus courante de .focus() est de permettre aux utilisateurs d'entrer rapidement un certain lien d'opération, par exemple, une fois la page chargée, laissez le curseur appara?tre directement dans la zone de recherche:

 document.QuerySelector ('# searchInput'). focus ();

Ou lorsque la vérification du formulaire échoue, passez automatiquement au premier champ d'erreur pour faciliter la modification de l'utilisateur.

Parfois, il doit également être utilisé en combinaison avec des déclencheurs d'événements, tels que cliquer sur le bouton "Modifier", rendre une certaine zone de contenu modifiable et se concentrer automatiquement.

Utilisation recommandée:

• Assurez-vous que l'élément cible est focalisé (tel que <input> , <textarea> , <button> ou des éléments avec tabindex ajouté).
• Avant d'utiliser l'élément créé dynamiquement, assurez-vous qu'il a été inséré dans le DOM.
• Notez que le comportement mobile peut être incohérent et que certains navigateurs mobiles ignoreront focus() par le programme.

Quand dois-je utiliser .blur()

.blur() est utilisé pour supprimer la mise au point de l'élément actuel et est souvent utilisé pour masquer le clavier souple de la méthode d'entrée ou annuler l'état de surbrillance. Par exemple, après avoir soumis un formulaire, vous souhaitez que la bo?te d'entrée ne soit plus mise en évidence:

 document.QuerySelector ('# username'). blur ();

Il y a un autre scénario commun où lorsque vous cliquez sur la zone externe pour fermer la fenêtre contextuelle, vous devez perdre l'accent sur l'élément ciblé précédemment pour empêcher le clavier de le toucher accidentellement.

Utilisation recommandée:

• N'abusez pas de .blur() , sinon il peut interrompre le processus d'entrée normal de l'utilisateur.
• Si vous écoutez les événements focus et blur , demandez-vous si la logique déclenchera des effets secondaires supplémentaires lorsque vous appelez .blur() .
• Sous certains navigateurs, blur() ne peut pas immédiatement déplacer la mise au point vers d'autres endroits, mais revenez plut?t à la racine du document.

évitez les problèmes causés par la concentration / le flou

Parfois, vous appelez accidentellement .focus() ou .blur() en continu, ce qui peut conduire à un comportement inattendu, comme:

• Exception de défilement de la page (le navigateur fait automatiquement défiler vers l'élément focalisé)
• Le clavier mobile mobile appara?t à plusieurs reprises et se ferme
• Plusieurs composants saisissent la focalisation les uns entre les autres, provoquant une "gigue de mise au point"

Ces problèmes sont généralement dus au mauvais moment d'appel, ou à l'absence de déterminer s'il est actuellement mis au point.

Solutions courantes:

• Vérifiez si document.activeElement est l'élément cible avant d'appeler .focus() .
• Utilisez setTimeout pour retarder l'exécution de certaines logiques de commutation de mise au point pour éviter les conflits.
• Pendant le développement des composants, encapsulez la logique de gestion de la mise au point pour éviter plusieurs modules fonctionnant en même temps.

Fondamentalement, c'est tout. .focus() et .blur() sont des méthodes très basiques, mais elles sont faciles à rester coincées dans des interactions complexes, en particulier la compatibilité et l'expérience utilisateur. La ma?trise de leur timing et de leurs précautions peut rendre votre interface plus naturelle et lisse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!