Sur ma page, j'ai plusieurs zones de texte et j'ai besoin d'au moins une de ces zones pour toujours avoir le focus. Y a-t-il un écouteur d'événement js que je peux appeler qui détecte quand rien sur la page n'a le focus, pour que je puisse lui donner le focus?
3 Réponses :
Vous pouvez également attacher un gestionnaire focusout au document qui vérifie les éléments focalisables à chaque fois qu'un événement focusout surgit. Puis forcez le focus sur un élément autre que la source de l'événement de flou, si aucun ne l'a.
Modifié par commentaire.
l'événement flou ne montera pas par défaut, changez useCapture sur true ou utilisez un autre événement 'focusout'
Si vous voulez savoir si un élément d'une liste de balises est ciblé:
function hasFocus(selector) {
return Array
.from(document.querySelectorAll(selector))
.some(function(el){
return el === document.activeElement
});
}
// usage
console.log(hasFocus('input, select, textarea'))
Au lieu de .filter (...). Length> 0 , vous pouvez simplement utiliser .some (...) .
Veuillez consulter ma solution sur ce lien: https://codesandbox.io/s/ nostalgic-lovelace-f9hei
Lorsque vous chargez la page, la première entrée obtient le focus. Chaque fois que vous cliquez. Une entrée aléatoire se concentre.
L'événement de flou ne montera pas par défaut. Alors faites-le bouillonner en changeant usecapture en true.
const inputs = document.querySelectorAll('input')
document.querySelector('input').focus()
document.addEventListener('blur', (e) => {
console.log(e)
if (e.isTrusted) {
const random = Math.round(Math.random() * (inputs.length-1));
console.log(random)
Array.from(inputs)[random].focus()
}
},true)
Pourquoi vous concentrez-vous sur un élément aléatoire? Cela n'a pas trop de sens pour moi ...
L'exigence de la question est qu '"au moins une de ces cases soit toujours focalisée". Je suppose que cela signifie qu'une entrée aléatoire doit être ciblée.
Est-ce que cela répond à votre question? Comment savoir quel élément DOM a le se concentrer?
"besoin d'au moins une de ces cases pour toujours avoir le focus" - Ce n'est pas possible. Sélectionnez simplement la barre d'adresse dans votre navigateur et tout élément ciblé perdra son focus.
Je l'ai actuellement configuré pour que chaque fois que vous cliquez n'importe où sur la page, la zone de texte obtient le focus. Cependant, il existe de nombreux boutons qui effectuent des appels ajax, ce qui fait que la page n'a rien de ciblé. Maintenant, je pourrais aller à chaque appel ajax et mettre le focus sur la boîte après chacun, mais je me demande juste s'il y a quelque chose de plus facile, où je peux simplement laisser la page reconnaître que rien n'a le focus, alors dans ce cas, définissez le focus .