Question Comment faire pour obtenir des boutons pour ne pas prendre le focus?


Je veux mes boutons de la barre d'outils (ExtJS) ne pas pour obtenir le focus sur la page Web quand ils sont cliqués, mais pour faire leur "chose" tout en laissant le focus inchangé par le clic. Comment je fais ça?


17
2018-06-11 16:39


origine


Réponses:


Je ne pense pas qu'il y ait un moyen facile de faire ce que vous voulez faire, car il s'agit du comportement par défaut du navigateur.

Vous pouvez bien sûr brouiller le bouton dès qu'il est cliqué, mais cela désélectionnera tout. Pour que l'objet précédemment actif reprenne le focus, vous devez créer une "mémoire" en ajoutant un gestionnaire de flou pour que chaque élément garde la trace de l'élément qui a perdu / perdu le focus (stocke l'id de l'élément dans un global). et le mettre à jour lorsqu'un élément perd le focus).


4
2018-06-12 10:45



Annulation du comportement par défaut de onmousedown empêche un élément d'obtenir le focus:

// Prevent capturing focus by the button.
$('button').on('mousedown', 
    /** @param {!jQuery.Event} event */ 
    function(event) {
        event.preventDefault();
    }
);

25
2018-06-20 02:49



document.activeElement stocke l'élément actuellement focalisé.

Ainsi, sur votre barre d’outils, vous pouvez ajouter un gestionnaire "mousedown" à cette fonction:

function preventFocus() {
  var ae = document.activeElement;
  setTimeout(function() { ae.focus() }, 1);
}

Essayez cet exemple:

<html>
<head>
<script>
function preventFocus() {
  var ae = document.activeElement;
    setTimeout(function() { ae.focus() }, 1);
}
</script>
</head>
<body>
<input type="text"/>
<input type="button" onmousedown="preventFocus()" onclick="alert('clicked')" value="Toolbar" />
</body>
</html>

6
2018-06-12 10:52



Étant donné que les boutons de la barre d'outils ne sont que des éléments de bouton HTML ordinaires, il s'agit d'un comportement de navigateur réel, auquel vous devez réfléchir à deux fois avant de le modifier. Mais cependant...

Vous devriez être capable d'empêcher le botton de recevoir le focus en revenant simplement false de son onclick gestionnaire.


0
2018-06-11 17:06



Peut-être devriez-vous essayer d'utiliser stateful et les propriétés de changement d'état pour les champs de formulaire ou autre pour obtenir le focus?


0
2018-06-12 10:37



J'attacherais un écouteur d'événement flou à tous les champs. Cet écouteur doit enregistrer le champ qui a perdu le focus dans une variable globale.

Ensuite, tout le bouton de la barre d’outils doit avoir un écouteur d’événement de focus. Cet écouteur doit cibler le champ qui a été enregistré comme décrit ci-dessus.

Ce code devrait fonctionner, même s'il ne l'a pas testé


0
2018-06-16 08:43



<script>
    function focusor(){
        document.getElementById('focus').focus;
    }
    document.onkeydown = focusor;
    document.onclick = focusor;
</script>
<div style="width: 0px; height: 0px; overflow: hiddden;">
    <button id="focus"></button>
</div>

Ce que j'ai trouvé, c'est que vous devrez créer un élément factice, j'ai trouvé que les boutons fonctionnaient mieux dans cette situation. mettre le bouton dans un div et faire le div 0px.

[ne faites pas afficher le div, certains navigateurs vont simplement l'ignorer]

Fondamentalement, tout clic ou bouton appuie, il se concentrera sur ce bouton factice. J'ai eu un projet très similaire et chaque fois qu'ils ont appuyé sur la touche du bas, il a sélectionné le premier bouton de la page, cela se concentre sur le bouton encore et encore.

Sorte de jacked up, mais ça marche.


0
2018-05-15 07:55