1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda Cambiar estilo de un parrafo al dar clic en un input

Tema en 'HTML y CSS' comenzado por Jose Villalta, 16 de Diciembre de 2016.

  1. Jose Villalta

    Jose Villalta Nuevo Miembro

    Se incorporó:
    26 de Agosto de 2016
    Mensajes:
    27
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola, quisiera saber como puedo hacer lo siguiente:
    cuando de clic en mi input quiero que el parrafo que esta arriba cambie su estilo (en el estilo cambia el color de fuente) y se mantenga asi hasta que de clic afuera o en otro input.

    AYUDAAAA!!!!
     
  2. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.014
    Me gusta recibidos:
    406
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    A Dawud le gusta esto.
  3. Dawud

    Dawud Miembro Activo

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    322
    Me gusta recibidos:
    239
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Hola puedes intentar usando como menciona @AngelKrak obteniendo su valor por datas definido y con las funciones focus() y focusout() para remover el estilo .. Por ejemplo supongamos que tienes una etiqueta label y luego el input al que luego de presionar en este puedes utilizar la funcion prev() (el cual te permite seleccionar un elemento anterior) y aplicar y luego con el elemento focusout() remover el estilo :)...

    Yo en este caso utilice los eventos focusin() y focusout() con el metodo prev()
    Código (Javascript):

    $(document).ready(function(){
        $("input").focusin(function(){
        //  $("label").css("color", "yellow");
        $(this).prev().css("color", "yellow");
        });
        $("input").focusout(function(){
             $(this).prev().removeAttr("style");

       //  $(this).prev().css("color", "black");
       //  $("label").removeAttr("style");
        });  
    });
     
     
    A AngelKrak le gusta esto.
  4. AngelKrak

    AngelKrak Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.014
    Me gusta recibidos:
    406
    Puntos de trofeos:
    83
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    eso esta bueno, pero que tal si mete los input y label dentro de div contenedores? asi no se podra usar el prev() yo creo que es mejor mi opcion jejeje xD
    Código (Text):
    <div>
      <input type="text">
    </div>

    <div>
      <label></label>
    </div>
     
    A Dawud le gusta esto.
  5. Dawud

    Dawud Miembro Activo

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    322
    Me gusta recibidos:
    239
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Pos la vdd :rolleyes: tendría que utilizar otros métodos existente de jQuery tales como parent(), find(), closest(), content() para localizar el elemento label o cualquier otro elemento...
    Hehehe :D pero bueno eso depende del programador o diseñador que lo este realizando...:)
    Saludos
     
    A gammafp y AngelKrak les gusta esto.
  6. gammafp

    gammafp
    Moderador
    Miembro del Equipo

    Se incorporó:
    12 de Enero de 2015
    Mensajes:
    769
    Me gusta recibidos:
    320
    Puntos de trofeos:
    63
    Género:
    Hombre
    Bueno acá dejo mi versión con javascript puro probadon en Chrome y firefox.
    HTML:
     <p>Hola soy el primer parrafo</p>
      <input type="text">
      <hr>
      <p>Soy el segundo parrafo</p>
      <input type="text">
    Su JavaScript

    Código (Javascript):
     
    // se seleccionan todos los elementos  de tipo input
    var objeto = document.querySelectorAll("input");
    /* para poder interactuar con los input se tiene que hacer un for para poder recorrer todos los inputs
    ya que en la variable objeto se guarda un array con los input encontrados. */

            for(var i = 0; i < objeto.length; i++) {
            // Se asigna el evento focus al input y cuando se posicione encima el raton se activará
                objeto[i].addEventListener("focus", function(evento) {
                // Con previousSibling se elige el elemento anterior
                    evento.target.previousSibling.previousSibling.style.color = "orange";
                }, false);

                objeto[i].addEventListener("focusout", function(evento) {
                    evento.target.previousSibling.previousSibling.style.color = "black";
                }, false);
            }
    El JavaScript tiene que estar al final del todo.
     
    A Dawud y AngelKrak les gusta esto.

Comparte esta página