3

Tengo un botón en un formulario que al estar activo genera un borde. El problema es que el botón no vuelve a su estado original y se queda como activo.

$('#enviar').on('click', function(e){
	e.preventDefault();
	var btn = $(this);
	$.ajax({
		    url  : "mail.php",
            type : "post",
            data : $(".form-horizontal").serialize(),
            success:(
            	function(data){
            		if(data==1){
            			btn.blur();
            		  resetForm();
            		  ballOut();
            		  setTimeout(function(){ showAlert('mensaje enviado') }, 1000);
						      setTimeout(function(){ hideAlert('mensaje enviado') }, 5000);

            		}else{
            			setTimeout(function(){ showAlert('error de envío, inténtalo más tarde') }, 1000);
            			setTimeout(function(){ hideAlert() }, 5000);
            		}
            	}
            ),
            error:(
            	function(){
            		console.log('ajax k.o');
            	}
            )
	});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group">
  <div class="col-md-8">
    <button type="button" id="enviar" class="btn btn-secondary">enviar</button>
  </div>
</div>

1
  • ¿Bootstrap 3 o 4? (Según tu tag es el 4, pero te recuerdo que aún está en beta, no deberías usarlo en producción aún). Commented el 9 ene. 2018 a las 9:35

1 respuesta 1

8

El problema que tienes es que ese borde es el "foco" del botón. Es decir, marca que el botón tiene el foco activo tras haberlo pulsado.

Puedes quitar el foco mediante javascript o bien eliminar ese borde mediante CSS.

Soltar el foco con javascript

Podemos hacer uso de HTMLElement.blur() para quitar el foco tras pulsar (evento onclick) el botón:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<div class="form-group">
  <div class="col-md-8">
    <button type="buttont" id="enviar"
        class="btn btn-secondary"
        onclick="this.blur()">enviar</button>
  </div>
</div>

Sobreescribir CSS de todos los botones:

Esta solución quita el borde a todos los botones de la página sobreescribiendo el estilo creado por bootstrap.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<style>
/* Modifico el estilo relacionado con el aspecto del botón con el foco activo */
.btn:focus {
    outline: none;
    box-shadow: none;
}
</style>
<div class="form-group">
  <div class="col-md-8">
    <button type="buttont" id="enviar" class="btn btn-secondary">enviar</button>
  </div>
</div>

Agregar estilo CSS al botón deseado:

Esta solución quita el borde sólo a aquellos botones a los que apliquemos el estilo nuevo.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<style>
/* Creo una clase nueva para cambiar el aspecto del foco activo */
.sinborde:focus {
    outline: none;
    box-shadow: none;
}
</style>
<div class="form-group">
  <div class="col-md-8">
    <button type="buttont" id="enviar"
        class="btn btn-secondary sinborde">enviar</button>
  </div>
</div>

9
  • 4
    Ya está, disculpa las molestias y que no funcionada como debía en un comienzo. El problema de que no funcionara era el sistema que tiene stackoverflow para probar código carga los estilos antes que el código HTML (donde se carga bootstrap), así que éste sobreescribía mis cambios propuestos al CSS. He tenido que crear un bloque <style> en el HTML para poder arreglarlo. Commented el 9 ene. 2018 a las 9:55
  • 1
    Oh bien, porque estaba probando de muchas formas y no me funcionaba ninguna. Gracias por el aporte.
    – Edu3D
    Commented el 9 ene. 2018 a las 9:57
  • No conocia el método, yo lo incorporé a mi archivo js, cuando capturo el evento del botón.Muchas gracias @OscarGarcia
    – crismf
    Commented el 9 ene. 2018 a las 11:32
  • De nada, un placer :) He creado un nuevo ejemplo en el que puedes eliminar ese efecto únicamente de los botones a los que les apliques un estilo que he llamado sinborde. Commented el 9 ene. 2018 a las 11:48
  • Se me presenta un problema añadido, ahora al retirar la clase el botón pierde su función, es decir, si envío el formulario necesito recargar la página para que el botón vuelva a funcionar.
    – crismf
    Commented el 9 ene. 2018 a las 11:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.