0

Estou fazendo um formulário utilizando primefaces, e queria que meu input trocasse de classe quando estivesse preenchido, só voltando a classe anterior caso o usuário apagasse o conteúdo. Isso é para fazer com que o outputLabel saia de dentro do input e fique vísivel conforme a figura que anexei.

A primeira figura é como é inicialmente; A segunda figura é como é pra ficar; A terceira é como está ficando.

Alguém sabe um jeito de fazer isso? o meu aqui não está dando certo...

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

2
  • Se entendi bem a sua dúvida, a forma de fazer isso usando Primefaces é com Watermark. Veja aqui: primefaces.org/showcase/ui/misc/watermark.xhtml
    – Edjane
    Commented 3/01/2018 às 0:44
  • Luan, poste o código também, fica mais fácil de analisar, inclusive o código que vc está tentando.
    – Sam
    Commented 3/01/2018 às 3:14

2 Respostas 2

0

Você pode fazer uma verificação no blur do input.

Veja qual a classe existente na label quando ela fica em cima do input (com o efeito que vc quer) e faça o seguinte:

SE ESTIVER USANDO 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');
   }
})

SE ESTIVER USANDO JAVASCRIPT PURO

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');
   }
}
7
  • Não estou usando jquery :(
    – Luan Silva
    Commented 3/01/2018 às 0:41
  • @LuanSilva atualizei a resposta com a solução usando javascript puro. Boa sorte ;) Commented 3/01/2018 às 0:50
  • ainda não funcionou!! acho que pode ser o lugar onde estou colocando... é preciso chamar essa função?? E eu ponho onde? num script dentro da mesma página ou em outro externo (se fazer diferença)
    – Luan Silva
    Commented 3/01/2018 às 1:00
  • @LuanSilva, atualizei o código novamente. Veja se agora funciona :) Você pode colocar num arquivo externo (se já houver um) ou no mesmo arquivo, como é um código relativamente pequeno, recomendo colocar no mesmo arquivo (tag script antes do fechamento do body). Commented 3/01/2018 às 1:01
  • ta quase lá... ele já está vindo com a classe mesmo sem ter nada escrito
    – Luan Silva
    Commented 3/01/2018 às 1:14
0

Se for apenas trocar a classe do input (conforme pergunta), use oninput (o oninput é mais eficiente porque detecta quaisquer alterações no campo):

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

Exemplo:

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" />

3
  • não tem o "oninput" pro inputText do primefaces
    – Luan Silva
    Commented 3/01/2018 às 2:21
  • @LuanSilva Atualizei a resposta. Abs!
    – Sam
    Commented 3/01/2018 às 3:25
  • Eu consegui resolver mudando o seu onInput pra onChange... Está funcionando. Obrigado!
    – Luan Silva
    Commented 3/01/2018 às 20:03

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 .