-3

Buenas pues estoy teniendo un problema que no entiendo, estoy haciendo una pequeña funcion en jquery para cambiar el color de borde de un input/select cuando hago click en un elemento (igual me funcionaria que se active solo al hacer focus o si cambia el valor)

 $("input").change(function(){
   $(this).style.boder = "1px solid black";
 });

probe literalmente con change, con click, con focus, con focusin y la funcion no hace absolutamente nada, que estoy haciendo mal?

2
  • podrías darnos el código completo? cual es el input que deseas cambiar? Además, está mal escrito la propiedad que deseas cambiar, es border Commented el 15 sept. 2022 a las 0:46
  • serian todos los input en general y bueno gracias por lo de la propiedad no lo habia notado pero probe con alert tambien y no lo muestra Commented el 15 sept. 2022 a las 1:03

3 respuestas 3

0

Vincule un controlador de eventos al evento de JavaScript "change" o active ese evento en un elemento.

$(document).on('change', 'input', function() {
   $(this).css('border', '1px solid black')
})
0

No funciona por un par de cuestiones:

  • Tenes que usar la funcion keyup si queres detectar cuando teclees, o focus si queres hacerlo en el momento que hagas click en el input. change espera que hagas un cambio en el input y luego salgas de él, para ejecutarse

  • Tenes que usar this en lugar de $this

  • No se si te ocurre pero en el editor de stackoverflow me aparece un outline azul cada vez que me paro sobre el input, por lo que lo escondi con css para que esto no tape el borde

$("input").focus(function(){
   this.style.border = "1px solid red";
 });
input:focus{
    outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text"/>

De todas maneras podes hacer lo que queres sin usar javascript ni jquery, con css alcanza, es mas performante y ademas cuando salis del input se vuelve a cambiar el css, cosa que a mi gusto queda mejor.

 input:focus{
    outline: none;
    border: 1px solid red;
 }
  <input type="text"/>

   

0

Si lo que deseas es hacer el cambio de tu input al dar click, tendrías que usar el método click de jquery:

$("input").click(function(){
   //...
}

Ahora solo faltaría cambiar el estilo del input cuando le das click a ello, yo lo hice de esta forma y me funcionó correctamente:

$("input").click(function(){
    $(this).css("border", "1px solid black");
});

El código completo sería así:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    Mi campo: <input type="text">
</body>
<script>
   $(document).ready(function () {
     $("input").click(function () {
        $(this).css("border", "1px solid black");
      });
    });
</script>
</html>

2
  • nada probe el codigo pero no funciona Commented el 15 sept. 2022 a las 2:26
  • Por ello mismo te solicitaba que adjuntes tu código completo. Además debería funcionarte (a menos que el error se encuentre en otra parte), nos avisas. Commented el 15 sept. 2022 a las 2:38

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.