Comment arrêter les boutons de rester déprimé avec Bootstrap 3
Comment faire un bouton dans le Bootstrap 3 undepress automatiquement après avoir cliqué?
À reproduire mon problème, faire une page avec des boutons, leur donner appropriée bootstrap classes (et intégrer bootstrap):
<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">
Chargement de la page et cliquez sur l'un des boutons. Il devient dépressif et mis en évidence jusqu'à ce que vous cliquez quelque part sur la page (à l'aide de FF29 et chrome35beta).
L'inspection de l'élément d'entrée tandis que les cliqué et unclicked ne présente pas de classes supplémentaires d'être fixé et retiré de la.
Voici un exemple de Bootstrap boutons de rester déprimé: http://jsfiddle.net/52VtD/5166/
Vous devez vous connecter pour publier un commentaire.
Dans votre exemple, les boutons de ne pas rester déprimé. Ils restent porté. Si vous voulez voir la différence, procédez de la manière suivante:
Si vous ne voulez pas que vos boutons de rester concentré après avoir été libéré, vous pouvez demander au navigateur de prendre le focus à eux chaque fois que vous relâchez la souris.
Exemple
Cet exemple utilise jQuery, mais vous pouvez obtenir le même effet avec de la vanille JavaScript.
Violon
Ou vous pouvez simplement utiliser une balise d'ancrage qui peuvent être de style exactement la même chose, mais comme ce n'est pas un élément de formulaire, il ne veut pas conserver la mise au point:
Voir le point d'Ancrage de l'élément de section ici: http://getbootstrap.com/css/#buttons
<a role="button" class="btn btn-default">yada</a>
), mais les autres si elle a un href (comme par @jme11 exemple). J'aurais pensé à un href moins ancre était nul, mais la cohérence entre chrome et firefox rend attrayant - oh, et il travaille dans IE11 sans un href trop.href
-moins de balise d'ancrage est valide HTML 5: "Si lea
élément n'a pas dehref
attribut, puis l'élément représente un espace réservé pour le cas où un lien, autrement, auraient été placés" (W3C HTML 5 spec). L'approche a bien fonctionné pour moi, sans les effets secondaires potentiels de liaison à un vide fragid.Le bouton reste concentré. Pour supprimer cette efficacement, vous pouvez ajouter ce code de requête à votre projet.
Cela fonctionne aussi pour les liens d'ancrage
event
declick(function())
.Ou angulaire moyen:
Remplacer _MORE_ELEMENT_ avec vos autres éléments.
Ou de l'attribut moyen:
Puis ajouter l'attribut à votre élément html: flou-moi
element.blur() is not a function
donc je n'aievent.target.blur()
Ma préférence:
Cela a à voir avec la
:active
et:focus
élément unis. Vous avez besoin de modifier les styles pour les états de ces boutons. Par exemple, pour le bouton par défaut:C'est le navigateur le focus puisque c'est un élément de formulaire (
input
).Vous pouvez supprimer facilement la mise au point avec un peu de css
Voici le violon avec votre exemple: http://jsfiddle.net/52VtD/5167/
MODIFIER
Ah, je viens de voir maintenant que la couleur du bouton lui-même trop de changements. Bootstrap changements sur le bouton, par exemple, de votre
btn-default
bouton avec ce css:Si vous ne voulez pas ce comportement, juste écraser avec votre css.