Exchange input class when completed

Question

I’m making a form using primefaces, and I wanted my input to change class when it was filled, only going back to the previous class if the user deleted the content. This is to make the outputLabel come out of the input and be visible according to the figure attached.

The first figure is as it is initially; The second figure is how to stay; The third is how it’s getting.

Does anyone know a way to do that? Mine’s not working...

Answer 1

You can do a check on the input Blur.

See which class is on the label when it is on top of the input (with the effect you want) and do the following:

IF YOU ARE USING JQUERY

$('#selector_input').on('blur', function(){
    var _self = $(this);

   if(_self.val() != null){
      $('#selector_label').addClass('class-do-efeito');
   }else{ 
      $('#selector_label').removeClass('class-do-efeito');
   }
})

IF YOU ARE USING PURE JAVASCRIPT

var input = document.getElementById('id_input');
var label = document.getElementById('id_label');

input.onblur = verifyInput(input);

function verifyInput(input){

   if(input.value != null){
      label.classList.add('class-do-efeito');
   }else{
      label.classList.remove('class-do-efeito');
   }
}

Answer 2

If you’re just changing the class of input (as a question), use oninput (the oninput is more efficient because it detects any changes in the field):

<script>
    var el = document.querySelector("#id_do_input");
    el.oninput = function(){
        this.value ? this.classList.remove('nome_da_class') : this.classList.add('nome_da_class')
    }
</script>

Example:

var el = document.querySelector("#id_do_input");
el.oninput = function(){
   this.value ? this.classList.remove('nome_da_class') : this.classList.add('nome_da_class');
}

.nome_da_class{
  background: yellow;
}

<input placeholder="Nome" type="text" class="nome_da_class" id="id_do_input" />