html - para - Cómo evitar que los botones se depriman con Bootstrap 3

codigo para crear botones en html

Question

¿Cómo se hace que un botón en Bootstrap 3 se presione 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 resalta hasta que haga clic en otro lugar en la página (usando FF29 y chrome35beta).

Inspeccionar el elemento de entrada mientras se hace clic y se desmarca no muestra ninguna clase adicional que se adjunte y se elimine de él.

Aquí hay un ejemplo de botones de Bootstrap que se mantienen deprimidos: http://jsfiddle.net/52VtD/5166/

Answer 1

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 los enlaces de anclaje

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

Answer 2

En su ejemplo, los botones no permanecen deprimidos. Ellos se mantienen enfocados . Si quieres ver la diferencia, haz lo siguiente:

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

Si no desea que sus botones permanezcan enfocados después de ser liberados, puede indicarle al navegador que quite el foco cuando suelte el mouse.

Ejemplo

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

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

Fiddle

Answer 3

Es el foco del navegador ya que es un elemento de formulario ( input ). Puedes eliminar 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 botón btn-default 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.

Answer 4

Esto tiene que ver con los estados :active y de elemento de :focus . Necesita modificar los estilos para 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;
}

Answer 5

Mi preferencia:

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

Answer 6

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

Reemplace _MORE_ELEMENT_ con sus 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);

A continuación, agregue el atributo a su elemento html: blur-me

<button blur-me></button>

Answer 7

O simplemente puede usar una etiqueta de anclaje que se puede diseñar exactamente igual, pero como no es un elemento de forma, no retiene el foco:

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

Consulte la sección del elemento Anchor aquí: http://getbootstrap.com/css/#buttons