3

Como faço para executar determinada função sem precisar esperar o usuário clicar no botão?

Por exemplo, caso o input username esteja vazio, adicionar uma div e quando não estiver mais vazio a div é destruída, isso sem nenhum button, sem ser preciso clicar.

2
  • Não sei se entendi direito, mas acho que vc tá procurando a função keypress. Criei aqui um pequeno fiddle, vê se é tipo isso que vc tá procurando: jsfiddle.net/gustavox/aVyuB/101 ?
    – gustavox
    Commented 19/07/2015 às 17:29
  • Basicamente, precisa bind para outro evento - click é apenas uma de vários. Commented 20/07/2015 às 0:36

3 Respostas 3

3

Acho meio desnecessário utilizar JQuery nesse caso, você poderia obter o resultado desejado utilizando apenas JavaScript puro....

Bom, de qualquer forma uma solução alternativa utilizando apenas JavaScript, sem Jquery

window.sumirDiv = function(){
  var campo = document.getElementById("campo").value;

  if(campo.length < 1) div.style.display = "block"; 
  else div.style.display = "none"; 
}
<input id="campo" type="text" onkeyup="sumirDiv()" style="float:left"/>
<div id="div" style="display:block">*Campo Obrigatorio</div>


Alterei a função para verificar no onkeyup, desse jeito a verificação só é feita apos a tecla ser solta.

onkeydown -> função é acionada quando o usuário está pressionando uma tecla

onkeypress -> função é acionada quando o usuário pressiona uma tecla

onkeyup -> função é acionada quando o usuário solta uma tecla

0
3

Resolveria o problema que você mencionou utilizando o evento onkeypress no input ou a partir do jQuery com o método keypress caso esteja vazio ou não vazio, exemplo:

HTML:

<input type="text" id="inputText">
<div id="conteudo">

JavaScript:

$('#inputText').keypress(function (){
    if (this.value != ''){
        $('#conteudo').innerHTML = '';
    } else {
        $('#conteudo').innerHTML = 'O campo não está preenchido';
    }
});

Caso preferir pode-se utilizar o método .remove quando não estiver vazio, porém quando estiver vazio novamente a div não será encontrada e consequentemente não será preenchida quando o usuário deixar o campo vazio, exemplo:

$('#conteudo').remove();

Espero que tenha lhe ajudado, qualquer dúvida estamos aqui.

3

Um outro exemplo, espero que ajude, este utiliza o metodo remove e add uma Classe e a função keyup.

CSS:

.notempty{
background-color:#0F0;
width:20px;
height:20px;
}

.empty{
background-color:#F00;
width:20px;
height:20px;
}   

HTML:

    <input type="text" />
    <p id="warning"></p>     

JQUERY:

$(document).ready(function(){
        $("#warning").addClass("empty");
            $(":text").keyup(function(){

                if(this.value != '')
                {
                    $("#warning").removeClass("empty");
                    /*remova addclass e terá o efeito esperado
                    $("#warning").addClass("notempty");*/
                }
        });
    });

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 .