web-dev-qa-db-fra.com

Comment empêcher les boutons de rester déprimés avec Bootstrap 3

Comment créer un bouton dans Bootstrap 3 annuler automatiquement la pression après avoir cliqué?

Pour reproduire mon problème, créez une page avec quelques boutons, attribuez-leur les bootstrap appropriées (et l'inclusion bootstrap)):

<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">

Chargez la page et cliquez sur l'un des boutons. Il devient déprimé et mis en surbrillance jusqu'à ce que vous cliquiez ailleurs sur la page (à l'aide de FF29 et de chrome35beta).

L'inspection de l'élément d'entrée cliqué et non cliqué ne montre aucune classe supplémentaire attachée et supprimée de celui-ci.

Voici un exemple de Bootstrap restant déprimés: http://jsfiddle.net/52VtD/5166/

htmlcsstwitter-bootstrap-3html-input
75
Robert Byers

Dans votre exemple, les boutons ne restent pas enfoncés. Ils restent concentrés . Si vous voulez voir la différence, procédez comme suit:

  1. Cliquez et maintenez un bouton.
  2. Libération. Vous verrez que lorsque vous relâchez la souris, l'aspect du bouton change légèrement car il n'est plus enfoncé.

Si vous ne voulez pas que vos boutons restent concentrés après avoir été relâchés, vous pouvez demander au navigateur de ne pas les activer chaque fois que vous relâchez la souris.

Exemple

Cet exemple utilise jQuery mais vous pouvez obtenir le même effet avec Vanilla JavaScript.

$(".btn").mouseup(function(){
    $(this).blur();
})

Violon

94
abl

Ou vous pouvez simplement utiliser une balise d'ancrage qui peut être stylée exactement de la même manière, mais comme ce n'est pas un élément de formulaire, il ne conserve pas le focus:

<a href="#" role="button" class="btn btn-default">one</a>.

Voir la section des éléments d'ancrage ici: http://getbootstrap.com/css/#buttons

25
jme11

Le bouton reste concentré. Pour supprimer cela efficacement, vous pouvez ajouter ce code de requête à votre projet.

$(document).ready(function () {
  $(".btn").click(function(event) {
    // Removes focus of the button.
    $(this).blur();
  });
});

Cela fonctionne aussi pour les liens d'ancrage

$(document).ready(function () {
  $(".navbar-nav li a").click(function(event) {
    // Removes focus of the anchor link.
    $(this).blur();
  });
});
10
chris31389

Ou angular façon angulaire:

function blurElemDirective() {
  return {
    restrict: 'E',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);

Remplacez _ MORE_ELEMENT _ par vos autres éléments.

Ou attribut façon:

function blurElemDirective() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      element.bind('click', function () {
        element.blur();
      });
    }
  };
}

app.directive('blurMe', blurElemDirective);

Ajoutez ensuite l'attribut à votre élément html: blur-me

<button blur-me></button>
8
naorz

Ma préférence:

<button onmousedown="event.preventDefault()" class="btn">Calculate</button>
8
Drazen Bjelovuk

C'est le focus du navigateur puisqu'il s'agit d'un élément de formulaire (input). Vous pouvez facilement supprimer la mise au point avec un peu de css

input:focus {
    outline: 0;
}

Voici le violon avec votre exemple: http://jsfiddle.net/52VtD/5167/

[~ # ~] éditer [~ # ~]

Ah, je viens de voir maintenant que la couleur du bouton change elle aussi. Bootstrap modifie le bouton de votre btn-default bouton avec ce css:

.btn-default:focus {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}

Si vous ne voulez pas ce comportement, écrasez-le avec votre css.

1
Anthony Weber

Cela a à voir avec le :active et :focus états d'élément. Vous devez modifier les styles pour ces états pour ces boutons. Par exemple, pour le bouton par défaut:

.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
    color: #333;
    background-color: #ccc;
    border-color: #fff;
}
1
rnevius