Focus Elements
Quels éléments peuvent se concentrer? Par défaut, seuls les éléments de formulaire peuvent se concentrer. Parce que seuls les éléments de forme peuvent interagir
<input type = "text" value = "223">
Il existe également un moyen de se concentrer sur les éléments non formels. Définissez d'abord tabIndex sur -1, puis appelez focus() .
<div id = "test" style = "height: 30px; width: 100px; background: LightGreen"> div </ div> <button id = "btn"> div element obtient focus </utton> <cript> btn.onclick = function () {test.tabindex = -1; test.focus (); } test.onfocus = function () {this.style.background = 'rose';} </cript>activeylement
document.activeElement est utilisée pour gérer la mise au point DOM et enregistre les éléments qui obtiennent actuellement le foyer.
[Remarque] 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"> div element obtient focus </fton> <script> console.log (document.activeElement); // <body> btn.onclick = function () {console.log (document.activeLelement); // <boutone> Tester> {console.log (document. test.focus (); console.log (document.activeElement); // <v>} </cript>Se concentrer
Il existe 4 façons pour les éléments d'obtenir la mise au point, y compris le chargement des pages, la saisie de l'utilisateur (appuyez sur la touche onglet), la méthode focus() et la propriété autofocus
【1】 Chargement de la page
Par défaut, lorsque le document est juste chargé, la référence à l'élément corporel est enregistrée dans document.activeElement . Pendant le chargement du document, la valeur de document.activeElement est nul
<Script> Console.log (document.activeElement); // null </ script> <body> <cript> console.log (document.activeElement); // <body> </cript> </ body>
【2】 Entrée utilisateur (appuyez sur la touche onglet)
Les utilisateurs peuvent généralement utiliser la touche TAB pour déplacer la mise au point et utiliser la barre d'espace pour activer la mise au point. Par exemple, si l'accent est mis sur un lien, appuyez sur la barre d'espace pour le moment et il sautera vers le lien
En ce qui concerne la touche TAB, nous ne devons pas mentionner tabindex . L'attribut tabindex est utilisé pour spécifier si le nœud d'élément HTML actuel est traversé par la clé de l'adhésion et la priorité de la traversée
1. Si tabindex=-1 , la touche de tabulation saute l'élément actuel
2. Si tabindex=0 , cela signifie que la touche de tabulation traversera l'élément actuel. Si un élément ne définit pas tabindex , la valeur par défaut est 0
3. Si tabindex est supérieur à 0, cela signifie que la touche de l'abat est traversée en premier. Plus la valeur est grande, plus la priorité est petite
Dans le code suivant, lors de l'utilisation de la clé de l'onglet, l'ordre dans lequel le bouton se concentre est 2, 5, 1 et 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> </v> <Script> Box.OnkeyUp = fonction () {DocumentElement.STYLE. 'rose';} </cript>【3】 focus ()
focus() est utilisée pour définir la mise au point du navigateur sur le champ de formulaire, c'est-à-dire activer le champ de formulaire afin qu'il puisse répondre aux événements du clavier.
[Remarque] Comme mentionné précédemment, s'il ne s'agit pas d'un élément de formulaire, défini sur tabIndex sur -1, vous pouvez également obtenir le focus
<span id = "test1" style = "height: 30px; width: 100px;"> span </span> <input id = "test2" value = "input"> <button id = "btn1"> Span Element obtient focus </ bouton> <Button id = "btn2"> Entrée obtient focus </utton> </ bouton> btn1.onclick = function () {test1.tabindex = -1; test1.focus ();} btn2.onclick = function () {test2.focus ();} </ script>【4】 Autofocus
Une propriété autofocus a été ajoutée au champ de formulaire HTML5. Tant que cette propriété est définie, l'accent peut être automatiquement déplacé vers le champ correspondant sans javascript.
[Remarque] Cet attribut ne peut être utilisé que pour les éléments de formulaire. Même si l'élément normal est défini sur tabIndex=”-1″ , il ne prendra pas effet.
<entrée autofocus value = "ABC">
Hasfocus ()
document.hasFocus() renvoie une valeur booléenne indiquant si des éléments dans le document actuel sont activés ou acquis. En vérifiant si le document s'est mis au point, vous pouvez savoir s'il interagit avec la page.
console.log (document.hasfocus ()); // true // cliquez sur d'autres onglets dans les deux secondes pour faire en sorte que la mise au point laisse la page actuelle setTimeout (function () {console.log (document.hasfocus ()); // false}, 2000);Perdre la focalisation
Si vous utilisez JavaScript pour perdre la concentration, vous devez utiliser blur()
Le but de la méthode blur() est de supprimer la mise au point de l'élément. Lors de l'appel blur() , l'accent ne sera pas transféré à un élément spécifique; c'est juste pour supprimer la mise au point de l'élément appelant la méthode
<input id = "test" type = "text" value = "123"> <Button id = "btn1"> gains de l'élément d'entrée focus </utton> <button id = "btn2"> L'élément d'entrée perd focus </utton> <cript> btn1.onclick = function () {test.focus ();} btn2.onclick = function () {test.blur ();}Événements de concentration
L'événement de mise au point est déclenché lorsque la page gagne ou perd la focalisation. En utilisant ces événements et en coopérant avec document.hasFocus() et la propriété document.activeElement , vous pouvez savoir où se trouve l'utilisateur sur la page.
Les événements de mise au point incluent les 4 suivants
1. Blur
L'événement blur est licencié lorsque l'élément perd la focalisation. Cet événement ne bouillonne pas
2. Focus
focus est licencié lorsque l'élément se concentre. Cet événement ne bouillonne pas
3. Focusin
focusin est licencié lorsque l'élément se concentre. Cet événement équivaut à focus , mais il bouillonne
4. Focusout
focusour est licencié lorsque l'élément perd la focalisation. Cet événement équivaut à l'événement Blur, mais il bouillonne
[Remarque] concernant les événements Focusin et Focusout, à l'exception du navigateur IE prenant en charge les gestionnaires d'événements de niveau DOM0, d'autres navigateurs ne prennent en charge que les gestionnaires d'événements DOM2
<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">Div element with content 123 gets focus</button><button id="btn2">Div element with content 123 Lose focus </ Button> <Button id = "reset"> restore </futton> <cript> reset.onclick = function () {history.go ();} // focus () méthode btn1.onclick = function () {boxin.tabindex = -1; Boxin.focus ();} // blur () Méthode btn2.onclick = function () {boxin.blur ();} // focusin event if (boxin.addeventListener) {boxin.addeventListener ('focusin', handler)} else {boxin.onfocusin = handler;} fonction handler () {this.Style. = 'LightBlue';} if (box.AddeventListener) {box.addeventListener ('focusIn', Handler)} else {box.onfocusin = handler;} // blur Event Fonction fnblur () {this.style.backgroundcolor = 'Orange'; D'après les résultats en cours, nous pouvons voir que focusin peut bouillonner; tandis que l'événement blur ne peut pas bouillonner.
Les événements de mise au point sont souvent utilisés pour l'affichage et la vérification des formulaires
Par exemple, lorsque vous obtenez le foyer, modifiez la couleur d'arrière-plan; Lorsque vous perdez la focalisation, restaurez la couleur d'arrière-plan et vérifiez-la.
<div id = "box"> <input id = "input1" type = "text" placeholder = "Entrée uniquement les nombres"> <input id = "input2" type = "text" placeholder = "Entrez uniquement les caractères chinois"> <span id = "Tips"> </span> </div> <cript> if (box.addevent); box.addeventListener ('focusout', fnout);} else {box.onfocusin = fnin; box.onfocusout = fnout;} fonction fnin (e) {e = e || événement; var cible = e.target || e.srcelement; Target.style.backgroundColor = 'LightGreen';} fonction fnout (e) {e = e || événement; var cible = e.target || e.srcelement; Target.style.backgroundColor = 'Initial'; // Si c'est une zone de texte qui vérifie le nombre if (Target === input1) {if (! / ^ / D * $ /. Test (Target.Value.trim ())) {Target.focus (); Tips.InnerHtml = 'Entrez uniquement les nombres, veuillez rentrer' setTimeout (function () {Tips.InnerHtml = ''}, 500); }} // Si c'est une zone de texte qui vérifie les caractères chinois if (Target === input2) {if (! / ^ [/ U4e00- / u9fa5] * $ /. Test (target.value.trim ())) {Target.focus (); Tips.InnerHtml = 'Entrez uniquement les caractères chinois, veuillez rentrer' setTimeout (function () {Tips.InnerHtml = ''}, 500); }}}} </ script>Résumer
Ce qui précède consiste à résumer tout le contenu de la gestion de la mise au point en JavaScript pour vous. Cet article est introduit en détail et a une certaine valeur de référence pour votre étude et votre travail. Si vous avez des questions, vous pouvez laisser un message pour communiquer.