English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Élément au focus
Quels éléments peuvent obtenir le focus ? Par défaut, seuls les éléments de formulaire peuvent obtenir le focus. Cela est dû au fait que seuls les éléments de formulaire peuvent interagir
<input type="text" value="223">
Il est possible de faire en sorte que des éléments non formulaires puissent obtenir le focus. Il suffit de définir la propriété tabIndex sur-1，puis appeler la méthode focus()
<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">L'élément div obtient le point de focus</button>
<script>
btn.onclick = function(){
test.tabIndex = -1;
test.focus();
}
test.onfocus = function(){
this.style.background = 'pink';
}
</script>
activeElement
L'attribut document.activeElement est utilisé pour gérer le point de focus du DOM, et conserve l'élément actuellement en point de focus
[Attention]Cette propriété n'est pas prise en charge par le navigateur IE
<div id="test" style="height:30px;width:100px;background:lightgreen">div</div>
<button id="btn">L'élément div obtient le point de focus</button>
<script>
console.log(document.activeElement);//<body>
btn.onclick = function(){
console.log(document.activeElement);//<button>
test.tabIndex = -1;
test.focus();
console.log(document.activeElement);//<div>
}
</script>
Obtenir le point de focus
Les éléments peuvent obtenir le point de focus de différentes manières4Types, y compris le chargement de la page, l'entrée de l'utilisateur (appuyez sur la touche Tab), la méthode focus() et l'attribut autofocus
【1】Chargement de la page
Par défaut, lorsque le document est complètement chargé, la référence de l'élément body est stockée dans document.activeElement. Pendant la phase de chargement du document, la valeur de document.activeElement est null
<script> console.log(document.activeElement);//null </script> <body> <script> console.log(document.activeElement);//<body> </script> </body>
【2】Entrée utilisateur (appuyez sur la touche Tab)
Les utilisateurs peuvent généralement utiliser la touche Tab pour déplacer le point de focus, et la touche d'espace pour activer le point de focus. Par exemple, si le point de focus est sur un lien, appuyez sur la touche d'espace pour sauter vers ce lien
En parlant de la touche Tab, on ne peut pas ne pas mentionner l'attribut tabIndex. L'attribut tabIndex est utilisé pour spécifier si un noeud d'élément HTML est parcouru par la touche Tab et la priorité de parcours
1、si tabIndex=-1，la touche Tab saute l'élément courant
2、si tabIndex=0, cela signifie que la touche Tab parcourra l'élément courant. Si un élément n'est pas configuré avec tabIndex, la valeur par défaut est 0
3、si tabIndex est supérieur à 0, cela signifie que la touche Tab parcoure en priorité. Plus la valeur est grande, plus le niveau de priorité est faible
Dans le code suivant, l'ordre de焦点 d'obtention des boutons en utilisant la touche Tab est2、5、1、3
<div id="box">
<button tabindex="3">1</button>
<button tabindex="1">2</button>
<button tabindex="0">3</button>
<button tabindex="-1">4</button>
<button tabindex="2">5</button>
</div>
<script>
box.onkeyup = function(){
document.activeElement.style.background = 'pink';
}
</script>
【3】focus()
La méthode focus() est utilisée pour définir le point de focus du navigateur sur un champ de formulaire, c'est-à-dire activer le champ de formulaire, afin qu'il puisse répondre aux événements du clavier
[Attention]Il a été mentionné précédemment, si ce n'est pas un élément de formulaire, le tabIndex est réglé sur-1，也可以获取焦点
<span id="test1" style="height:30px;width:100px;">span</span>
<input id="test2" value="input">
<button id="btn1">span元素获得焦点</button>
<button id="btn2">input元素获得焦点</button>
<script>
btn1.onclick = function(){test1.tabIndex=-1;test1.focus();}
btn2.onclick = function(){test2.focus();}
</script>
【4】autofocus
HTML5Un champ de formulaire a ajouté une propriété autofocus, dès que cette propriété est définie, sans JavaScript, le focus peut être automatiquement déplacé vers le champ correspondant
[Attention] Cette propriété ne peut être utilisée que pour les éléments de formulaire, les éléments ordinaires même s'ils sont définis avec tabIndex="-1″ ne fonctionne pas non plus
<input autofocus value="abc">
hasFocus()
La méthode document.hasFocus() renvoie une valeur booléenne, indiquant si un élément est activé ou a obtenu le focus dans le document. En vérifiant si le document a obtenu le focus, vous pouvez savoir si vous interagissez avec la page
console.log(document.hasFocus());//true
//Cliquez sur une autre page d'onglet dans les deux secondes pour quitter le focus de la page actuelle
setTimeout(function(){
console.log(document.hasFocus());//false
},2000);
失去焦点
Si vous utilisez JavaScript pour faire perdre le focus à un élément, vous devez utiliser la méthode blur()
La méthode blur() a pour effet de retirer le focus de l'élément. Lorsque vous appellez la méthode blur(), il ne déplace pas le focus vers un élément spécifique ; il ne fait que retirer le focus de l'élément appelant cette méthode
<input id="test" type="text" value="123">
<button id="btn1">input元素获得焦点</button>
<button id="btn2">input元素失去焦点</button>
<script>
btn1.onclick = function(){test.focus();}
btn2.onclick = function(){test.blur();}
</script>
Événements de focus
Les événements de focus sont déclenchés lorsque la page obtient ou perd le focus. En utilisant ces événements avec la méthode document.hasFocus() et l'attribut document.activeElement, vous pouvez connaître les mouvements de l'utilisateur sur la page
Les événements de focus incluent les éléments suivants4个
1、blur
L'événement blur est déclenché lorsque l'élément perd le focus. Cet événement ne bubbling
2、focus
L'événement focus est déclenché lorsque l'élément obtient le focus. Cet événement ne bubbling
3、focusin
L'événement focusin est déclenché lorsque l'élément obtient le focus. Cet événement est équivalent à l'événement focus, mais il est bubbling
4、focusout
L'événement focusout est déclenché lorsque l'élément perd le focus. Cet événement est équivalent à l'événement blur, mais il peut être propagé
[Attention] Concernant les événements focusin et focusout, à l'exception du navigateur IE qui prend en charge les gestionnaires d'événements de niveau DOM0, les autres navigateurs ne prennent en charge que le DOM2Gestionnaire d'événements de niveau
<div id="box"style="display:inline-block;padding:25px;background-color:lightgreen;">
<div id="boxIn" style="height: 50px;width: 50px;background-color:pink;">123</div>
</div>
<button id="btn1">Le contenu est123L'élément div obtient le focus</button>
<button id="btn2">Le contenu est123L'élément div perd le focus</button>
<button id="reset">Réinitialiser</button>
<script>
reset.onclick = function(){history.go();}
//Méthode focus
btn1.onclick = function(){
boxIn.tabIndex= -1;
boxIn.focus();
}
//Méthode blur
btn2.onclick = function(){
boxIn.blur();
}
//Événement focusin
if(boxIn.addEventListener){
boxIn.addEventListener('focusin',handler)
}else{
boxIn.onfocusin = handler;
}
function handler(){
this.style.backgroundColor ='lightblue';
}
if(box.addEventListener){
box.addEventListener('focusin',handler)
}else{
box.onfocusin = handler;
}
//Événement blur
function fnBlur(){
this.style.backgroundColor = 'orange';
}
boxIn.onblur = fnBlur;
box.onblur = fnBlur;
</script>
D'après les résultats de l'exécution, l'événement focusin peut être propagé ; tandis que l'événement blur ne peut pas être propagé
Les événements de focus sont souvent utilisés pour afficher et valider les formulaires
Par exemple, modifier la couleur d'arrière-plan lors de l'obtention du focus ; restaurer la couleur d'arrière-plan et valider lors de la perte de focus
<div id="box">
<input id="input"}1" type="text" placeholder="Seulement les chiffres sont autorisés">
<input id="input"}2" type="text" placeholder="Seulement les caractères chinois peuvent être entrés">
<span id="tips"></span>
</div>
<script>
if(box.addEventListener){
box.addEventListener('focusin',fnIn);
box.addEventListener('focusout',fnOut);
}else{
box.onfocusin = fnIn;
box.onfocusout = fnOut;
}
function fnIn(e){
e = e || event;
var target = e.target || e.srcElement;
target.style.backgroundColor = 'lightgreen';
}
function fnOut(e){
e = e || event;
var target = e.target || e.srcElement;
target.style.backgroundColor = 'initial';
//Si c'est un champ de texte pour la validation des chiffres
if(target === input1{
if(!/^\d*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Seulement les chiffres peuvent être entrés, veuillez réessayer'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
//Si c'est un champ de texte pour la validation des caractères chinois
if(target === input2{
if(!/^[\u4e00-\u9fa5]*$/.test(target.value.trim())){
target.focus();
tips.innerHTML = 'Seulement les caractères chinois peuvent être entrés, veuillez réessayer'
setTimeout(function(){
tips.innerHTML = ''
},500);
}
}
}
</script>
Résumé
Voici un résumé de tout le contenu de gestion des focaux dans JavaScript, cet article est très détaillé et a une certaine valeur de référence pour l'apprentissage et le travail des utilisateurs. Si vous avez des questions, vous pouvez laisser des commentaires pour échanger.