0

aprendo jquery. Tengo la siguiente funcion:

$("#nombre").focus(function(){
    $(this).css("border", "2px solid pink");
    });

y mi codigo HTML

<form>
    <input type="text" id="nombre" /> 
</form>

Pero al dar click en el input en navegador Chrome no funciona. Y su utilizo Firefox si funciona sin problema alguno. En chrome SOLO al hacer clic fuera del input lo pinta rosa. Y en firefox al hacer clic dentro del input lo hace, lo que es lo correcto comoi firefox lo hace Alguna idea?

Tengo jquery; js/jquery-3.5.1.min.js

3
  • Debería de funcionarte sin problema, eh testeado tu código en mi PC con Chrome y funciona correctamente, intenta agregar el evento blur a ese mismo elemento y agrega los estilos como al inicio. Commented el 18 oct. 2020 a las 16:05
  • El código funciona sin problema alguno, solo has esto: outline: none;
    – user128299
    Commented el 18 oct. 2020 a las 16:16
  • En la pregunta que marco como duplicada esta la solución planteada en el comentario anterior
    – user128299
    Commented el 18 oct. 2020 a las 16:17

2 respuestas 2

0

Intenta con lo siguiente:

$("#nombre").on('focus', function(){
    $(this).css("outline", "unset");
    $(this).css("border", "2px solid pink");
});
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<form>
    <input type="text" id="nombre" /> 
</form>

Chrome por default te pone esta regla en los focus:

:focus { outline: -webkit-focus-ring-color auto 1px; }

con la siguiente linea la idea es quitar este estilo que te pone por default en el outline

$(this).css("outline", "unset");

0
0

Hola como ya lo mencionaron el problema es con la propiedad outline de css, también se puede tener el mismo efecto solo con CSS, y si quieres solo hacerlo con Jquery también puedes usar el método focusout para restablecer el valor del border original.

Ejemplo con Jquery:

$("#nombre").focus(function(){
  $(this).css("border", "2px solid pink");
});

$("#nombre").focusout(function(){
  $(this).css("border", "2px solid salmon");
});
#nombre {
  outline: none;
  border: 2px solid salmon;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 
 <form>
    <input type="text" id="nombre" /> 
</form>

Ejemplo con CSS:

#nombre {
  outline: none;
  border: 2px solid salmon;
}

#nombre:focus {
  border: 2px solid pink;
  color: gray;
}
<form>
    <input type="text" id="nombre" /> 
</form>

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