Comment empêcher la fenêtre du navigateur de se déplacer vers le haut de la page lorsque l'utilisateur clique sur un bouton radio jQueryUI ?

Question

J'ai des boutons radio configurés comme ceci :

<div id="typeRadios">
    <input id="note_notetype_note1" name="note[notetype]" type="radio" value="note1" /><label for="note_notetype_note1">note1</label>
    <input id="note_notetype_note2" name="note[notetype]" type="radio" value="note2" /><label for="note_notetype_note2">note2</label>
</div>

que je transforme en boutons jQueryUI comme ceci :

$("#typeRadios").buttonset();

Voici le HTML qui en résulte :

<input type="radio" value="note1" name="note[notetype]" id="note_notetype_note1" class="ui-helper-hidden-accessible">
<label for="note_notetype_note1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note1</span></label>
<input type="radio" value="note2" name="note[notetype]" id="note_notetype_note2" class="ui-helper-hidden-accessible">
<label for="note_notetype_note2" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">note2</span></label>

Les boutons fonctionnent, mais chaque fois que je clique sur l'un d'entre eux, la fenêtre d'affichage du navigateur est ramenée en haut de la page, de la même manière que lorsque vous cliquez sur un bouton de la barre d'outils. <a href="#">link</a> lien.

J'utilise jQuery 1.4.2 et jQueryUI 1.8.7. Comment puis-je éviter ce comportement ? Merci de votre lecture.

EDIT : Le <a href="#">link</a> Il manquait une partie.

Answer 1

J'ai rencontré ce problème récemment et j'ai en fait trouvé une solution qui pourrait vous aider en fonction de votre CSS.

En fait, si vous masquez vos boutons radio en dehors de la page en utilisant quelque chose comme :

input[type="radio"] {
  left : -10000px;
  position: absolute;
  top : -10000px;
}

Ou quelque chose de similaire, c'est le top : -10000px ; c'est là le problème.

En d'autres termes, lorsque le bouton radio est inévitablement mis en évidence par le clic sur l'étiquette, la page tente de l'afficher en faisant défiler la fenêtre du navigateur jusqu'au bouton radio. Puisque la valeur minimale du scrollTop du navigateur est de 0 il défile vers le haut.

Si vous supprimez simplement la règle top : -10000px ; cela réglera le problème.

J'espère que cela vous aidera.

p.s. La raison pour laquelle preventDefault et stopPropagation ne fonctionnent pas dans ce cas, comme mentionné comme solution dans d'autres commentaires, est qu'ils n'empêchent pas le comportement par défaut du navigateur de mettre au point le champ du formulaire lorsque l'étiquette est cliquée.

Answer 2

J'ai essayé de recréer le problème, mais sans succès. Je l'ai vérifié dans FireFox 3.6.13, Google chrome 8.0 et Internet Explorer 8.

Pouvez-vous donner plus de détails pour recréer le problème ou peut-être tester la page html ?

Avez-vous un événement de clic pour les boutons radio. Si vous en avez un sur votre gestionnaire d'événement, vous pouvez arrêter la propagation de l'événement et essayer une fois.

function clickhandler(ev){
    ev.stopPropagation();
    ev.preventDefault();
    //Your code here
}

Mais quel que soit le code donné ici, il ne suggère rien qui puisse provoquer ce comportement. Si vous avez une page de test, veuillez mettre à jour le post avec cela.

Answer 3

Au lieu d'utiliser href="#", utilisez href="#add" ou tout autre texte pertinent. Cela permettra de résoudre le problème du saut en haut de la page.

Answer 4

Le problème est que lorsque vous cliquez sur l'étiquette du bouton radio, le bouton prend automatiquement le focus. N'utilisez pas les propriétés de position comme top:-100000000px et left:-100000000px .

Je pense que vous devez simplement définir la propriété Visibility du texte d'entrée sur Hidden.

input[type="radio"]{visibility:hidden;}

Answer 5

On dirait que vous devez gérer un clic, et mettre là return false; à la fin du gestionnaire. Ou peut-être est-il préférable d'empêcher le bouillonnement de l'événement en utilisant :

...
ev.preventDefault();
ev.stopPropagation();

où ev - est un objet Événement