help with Focus effect

Question

what I need to do is make it work when the user presses tab also, something else has how to use pure js within 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;
}

the desired effect ta so, working only with the mouse click, as would work on the key tab ?

Answer 1

Friend not to be rude, but you don’t need JS, much less jQuery for that, just use the :Focus selector of CSS. And YES you can use JS inside jQuery, console.log() same is a basic example.

As you put a very strong rule in the display:None I had to write the CSS to be equivalent in the display:block

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

Also notice that part input:Focus + label, This means that when the input is with Focus the label that comes next will appear. I had to put the input before the label, but I think it’s not a problem for you because it doesn’t change the layout nor the semantics since the input has placerholder and the corresponding type. Or you can use the aria-labelledby to make everything right https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Usando_o_atributo_aria-labelledby

See the code, you can click or give Tab that will work, even better than before, because in your model even clicking off the labal kept appearing...

.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>