1

oque eu preciso é fazer com que isso funcione quando o usuario apertar tab também, outra coisa tem como usar js puro dentro do jquery?

<form method="post" id="form_log" class="form" autocomplete="off">

  <ul>
     <li><div class="input input_email">
        <label id="label_email" for="email">digite seu email <strong>*</strong></label>
        <input type="text" name="email" id="email" placeholder="digite seu email..."/>
     </div></li>

     <li><div class="input input_senha">
        <label id="label_senha" for="senha">digite sua senha <strong>*</strong></label>
        <input type="password" name="password" id="password" placeholder="digite sua senha..."/>
     </div></li>

     <li><div class="input">
        <input type="submit" value="fazer login"/> ou <b id="bt_cad">cadastre se</b>
     </div></li>
   </ul>

</form>

jquery

// campo do email

// input do email
var input_email = $(".input_email");

// label do input email
var label_email = $("#label_email");

input_email.click(function() {
    input_email.css("border-color", "#000");
    input_senha.css("border-color", "#e1e1e1");
    label_email.css("display", "block");
    label_senha.css("display", "none");
});


// campo do senha

// input da senha
var input_senha = $(".input_senha");

// label da senha
var label_senha = $("#label_senha");

input_senha.click(function() {
    input_senha.css("border-color", "#000");
    input_email.css("border-color", "#e1e1e1");
    label_senha.css("display", "block");
    label_email.css("display", "none");
});

css

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

.form ul li .input {
  float: left;
  margin: 0 0 25px 0;
  width: 100%;
  height: 35px;
  border: 1px solid #e1e1e1;
  background-color: #f4f4f4;
  position: relative;
}

.form ul li:last-child .input {
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 1.7em;
  margin: -10px 0 0 0;
}

.form ul li .input label {
  display: none;
  position: absolute;
  top: -15px;
  left: 10px;
  text-transform: uppercase;
  padding: 5px 10px 1px 10px;
  background-color: #09c;
  font-size: 1.5em;
  color: #fff;
}

.form ul li input[type=text],
.form ul li input[type=password] {
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.form ul li input[type=submit] {
  float: left;
  margin: 0 10px 0 0;
  height: 100%;
  background-color: #09c;
  border: 1px solid #09c;
  box-shadow: inset 0 0 0 1px #f4f4f4;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.form ul li b {
  margin: 0 0 0 10px;
  cursor: pointer;
  font-weight: normal;
}

inserir a descrição da imagem aqui

o efeito desejado ta assim, funcionando só com o clique do mouse, como faria pra funcionar na tecla tab ?

1 Resposta 1

3

Amigo sem querer ser indelicado, mas vc não precisa de JS, muito menos de jQuery para isso, basta usar o seletor :focus do CSS. E SIM vc pode usar JS dentro do jQuery, console.log() mesmo é um exemplo básico.

Como vc colocou uma regra muito forte no display:none precisei escrever o CSS para ficar equivalente no display:block

.form ul li div input:focus + label {
  display: block
}

Além disso repare nessa parte input:focus + label, isso significa que quando o input estiver com focus a label que vem a seguir vai aparecer. Eu tive que colocar o input antes da label, mas acho que não é problema pra vc pois não altera o layout e nem a semântica já que o input tem placerholder e o type correspondente. Ou vc pode usar o aria-labelledby para deixar tudo certinho mesmo https://developer.mozilla.org/pt-BR/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-labelledby

Veja o código, pode clicar ou dar Tab que vai funcionar, até melhor que antes, pq no seu modelo mesmo clicando fora a labal continuava aparecendo...

.form {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
}

.form ul li .input {
  float: left;
  margin: 0 0 25px 0;
  width: 100%;
  height: 35px;
  border: 1px solid #e1e1e1;
  background-color: #f4f4f4;
  position: relative;
}

.form ul li:last-child .input {
  border: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  text-transform: uppercase;
  font-size: 1.7em;
  margin: -10px 0 0 0;
}

.form ul li .input label {
  display: none;
  position: absolute;
  top: -15px;
  left: 10px;
  text-transform: uppercase;
  padding: 5px 10px 1px 10px;
  background-color: #09c;
  font-size: 1.5em;
  color: #fff;
}

.form ul li input[type=text],
.form ul li input[type=password] {
  width: 100%;
  height: 100%;
  background-color: transparent;
}

.form ul li input[type=submit] {
  float: left;
  margin: 0 10px 0 0;
  height: 100%;
  background-color: #09c;
  border: 1px solid #09c;
  box-shadow: inset 0 0 0 1px #f4f4f4;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}

.form ul li b {
  margin: 0 0 0 10px;
  cursor: pointer;
  font-weight: normal;
}
ul {
  list-style: none;
}
.form ul li div input:focus + label {
  display: block
}

  
  
<form method="post" id="form_log" class="form" autocomplete="off">

    <ul>
       <li><div class="input input_email">
         <input type="text" name="email" id="email" placeholder="digite seu email..."/>
         <label id="label_email" for="email">digite seu email <strong>*</strong></label>
       </div></li>
  
       <li><div class="input input_senha">
         <input type="password" name="password" id="password" placeholder="digite sua senha..."/>
         <label id="label_senha" for="senha">digite sua senha <strong>*</strong></label>
       </div></li>
  
       <li><div class="input">
          <input type="submit" value="fazer login"/> ou <b id="bt_cad">cadastre se</b>
       </div></li>
     </ul>
  
  </form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .