Cómo evitar que los botones permanezcan presionados con Bootstrap 3

¿Cómo se hace que un botón en Bootstrap 3 se desactive automáticamente después de hacer clic?

Para replicar mi problema, crea una página con algunos botones, dales las clases de arranque apropiadas (e incluye bootstrap):

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

Cargue la página y haga clic en uno de los botones. Se deprime y se resalta hasta que hace clic en otro lugar de la página (usando FF29 y chrome35beta).

Inspeccionar el elemento de entrada mientras se hace clic y no se hace clic no muestra ninguna clase adicional adjunta y eliminada de él.

Aquí hay un ejemplo de botones de Bootstrap que permanecen presionados: http://jsfiddle.net/52VtD/5166/

En su ejemplo, los botones no permanecen presionados. Se mantienen concentrados . Si desea ver la diferencia, haga lo siguiente:

1. Haga clic y mantenga presionado un botón.
2. Lanzamiento. Verás que cuando sueltas el mouse, la apariencia del botón cambia ligeramente, porque ya no se presiona.

Si no desea que sus botones se mantengan enfocados después de soltarlos, puede indicarle al navegador que los quite el foco cada vez que suelte el mouse.

Ejemplo

Este ejemplo usa jQuery pero puede lograr el mismo efecto con JavaScript vanilla.

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

Violín

O simplemente puede usar una etiqueta de anclaje que puede tener exactamente el mismo estilo, pero como no es un elemento de formulario, no retiene el foco:

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

Consulte la sección de elementos de anclaje aquí: http://getbootstrap.com/css/#buttons

El botón permanece enfocado. Para eliminar esto de manera eficiente, puede agregar este código de consulta a su proyecto.

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

Esto también funciona para enlaces de anclaje

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

Mi preferencia:

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

O forma angular:

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);

Reemplaza _MORE_ELEMENT_ con tus otros elementos.

O forma de atributo:

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

app.directive('blurMe', blurElemDirective);

Luego agregue el atributo a su elemento html: blur-me

<button blur-me></button>

Es el foco del navegador ya que es un elemento de formulario ( input). Puede quitar fácilmente el enfoque con un poco de CSS

input:focus {
    outline: 0;
}

Aquí está el violín con su ejemplo: http://jsfiddle.net/52VtD/5167/

EDITAR

Ah, acabo de ver ahora que el color del botón también cambia. Bootstrap cambia el botón de, por ejemplo, su btn-defaultbotón con este CSS:

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

Si no desea este comportamiento, simplemente sobrescríbalo con su css.

Esto tiene que ver con los estados de los elementos :activey :focus. Necesita modificar los estilos de esos estados para estos botones. Por ejemplo, para el botón predeterminado:

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