how to add class in a specific input text element?

Question

how to add class in a specific input text element?

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I have a page with lots of inputs.

<form action="">

<div class="row">
<label for="texto">texto</label>
    <input type="text" class="nome">
    <span class="repositorio"><span class="efeito"></span></span>
</div>

<div class="row">
<label for="texto">password</label>
    <input type="password" class="email">
    <span class="repositorio"><span class="efeito"></span></span>
</div>
</form>

CSS is more or less like this ...

<style>
form{
    width: 200px;
    margin: 200px auto;
}
    .row{
        background-color: #999;

    }
    label{
        width: 100%;
        background-color: #099;
        display: block;
    }
    input.nome,
    input.email{
        height: 26px;
        width: 100%;
        border:none;
    }
    .repositorio{
        height: 2px;
        width: 100%;
        display: block;
        position: relative;
    }
.efeito{
    height: 100%;
    background-color: #f00;
    position: absolute; 
    left: 50%;
    right: 50%;
    transition:.5s;
}

.efeito.efeitoStart{
    left: 0; right: 0; 
}
</style>

and jquery:

$( ".nome" ).focusin( function () {
$('.efeito').addClass("efeitoStart");
});
$( ".nome" ).focusout( function () {
$('.efeito').removeClass("efeitoStart");
});

Obviously this works, but applies the effect to all inputs, since the class that receives the effect is the same, either for any input.

I could apply an ID for each input, but since the system contains many elements, I believe it would not be legal to have a large JS file.

How can I apply the effect class only in the span of the clicked input?

javascript jquery

asked by anonymous 12.04.2017 / 19:18

2 answers

0

You can also apply this effect with pure CSS using the :focus (learn more) , example :

form{
    width: 200px;
    margin: 200px auto;
}
.row{
  background-color: #999;
}
label{
  width: 100%;
  background-color: #099;
  display: block;
}
input.nome,
input.email{
  height: 26px;
  width: 100%;
  border:none;
}

.repositorio{
  height: 2px;
  width: 100%;
  display: block;
  position: relative;
}

input:focus ~ span.repositorio .efeito{
   left: 0; right: 0; 
 }

.efeito{
    height: 100%;
    background-color: #f00;
    position: absolute; 
    left: 50%;
    right: 50%;
    transition:.5s;
}

<form action="">
  <div class="row">
    <label for="texto">texto</label>
    <input type="text" class="nome">
    <span class="repositorio"><span class="efeito"></span></span>
  </div>

  <div class="row">
    <label for="texto">password</label>
    <input type="password" class="email">
    <span class="repositorio"><span class="efeito"></span></span>
  </div>
</form>

12.04.2017 / 20:07

How to resolve message Illegal offset type Error starting project nodejs + Sequelize + mysql

score 1 · Accepted Answer

I do not know if this is the way you wanted to, but changing the selector you have when applying the class works, look:

$( "input" ).focusin( function () {
	$(this).next().find('.efeito').addClass("efeitoStart");
});
$( "input" ).focusout( function () {
	$(this).next().find('.efeito').removeClass("efeitoStart");
});

form{
    width: 200px;
    margin: 200px auto;
}
    .row{
        background-color: #999;

    }
    label{
        width: 100%;
        background-color: #099;
        display: block;
    }
    input.nome,
    input.email{
        height: 26px;
        width: 100%;
        border:none;
    }
    .repositorio{
        height: 2px;
        width: 100%;
        display: block;
        position: relative;
    }
.efeito{
    height: 100%;
    background-color: #f00;
    position: absolute; 
    left: 50%;
    right: 50%;
    transition:.5s;
}

.efeito.efeitoStart{
    left: 0; right: 0; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><formaction="">

<div class="row">
<label for="texto">texto</label>
    <input type="text" class="nome">
    <span class="repositorio"><span class="efeito"></span></span>
</div>

<div class="row">
<label for="texto">password</label>
    <input type="password" class="email">
    <span class="repositorio"><span class="efeito"></span></span>
</div>
</form>

Remember that you were very specific. If you change the structure of those span's there, it will not work anymore