Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Leandro Pedrosa

Verificar se uma tecla foi pressionada com javascript para parar o con

Por , em Javascript

Recommended Posts

Leandro Pedrosa    1

Leandro Pedrosa
Postado

Boa tarde,

 

Estou com problema em um código javascript, estou querendo passar um argumento cada vez que o usuário teclar através do onkeyup, só que tem um porém, quando o usuário teclar, irá iniciar um contador de 5 segundos por exemplo, e passado estes 5 segundos ele irá executar uma ação chamando uma função para enviar os dados que foram digitados, caso contrário, ele pressionar uma tecla qualquer que seja durante a contagem, o contador iniciará tudo de novo em 5 segundos, mas mesmo quando terminava a contagem em que ele mandava os dados, o usuário poderia digitar novamente, e aí iniciar novamente a contagem.

 

 

<script type="text/javascript">
var c=5;
var t;

function contarTempo(){
if(document.getElementById("busca").onkeyup == true){
    clearTimeout(t);
           c = 5;
           t=setTimeout("contarTempo()",1000);
}else{
  if(c != 0){
    document.getElementById('tempo').innerHTML=c;
    c=c-1;
           document.getElementById('txt').innerHTML="";
    t=setTimeout("contarTempo()",1000);

  }else if(c == 0){
    document.getElementById('txt').innerHTML="esgotado";
           c = 5;
           noticia(formulario); // enviar os dados
  }
       }
}
var formulario;
function doTimer(form){
formulario = form;
contarTempo();
}




</script>
<input type="text" name="busca" id="busca" onkeyup=" doTimer(this.value);" />
<span id="tempo"></span><br />
<span id="txt"></span><br /><br />

 

As impressões de tempo e se está esgotado é apenas pra verificar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Francis Schiavo    1

Francis Schiavo
Postado

Pelo que entendi o que você quer é isso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Teste</title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript">
     // ID do intervalo
     var timer;
     // Contador de tempo
     var counter = 6;

     // Função para enviar os dados
     function sendData(){
       counter++;
       // Mostra o status do contador no titulo do documento (apenas para teste)
       document.title = counter;
       if (counter != 5)
         return;
       input = document.getElementById('Teste');
       alert(input.value);
     }

     // Inicia o contador (onfocus)
     function startTimer(){
       timer = window.setInterval(sendData, 1000);
     }

     // Para o contador (onblur)
     function stopTimer() {
       window.clearInterval(timer);
     }

     // Reseta o contador (onkeyup)
     function resetCounter(E){
       counter = 0;
     }
   </script>
 </head>
 <body>
   <input type="text" name="inpTeste" id="Teste" onfocus="startTimer();" onblur="stopTimer();" onkeyup="resetCounter();" />
 </body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Pedrosa    1

Leandro Pedrosa
Postado

Primeiro quero agradecer pela compreensão Francis.

 

É quase isso. Em vez de ser progressivo seria regressivo, igual no caso que eu apresentei.

Porque meu problema é o seguinte, o que estou querendo fazer é uma consulta com ajax, só que tem porém se toda vez que for fazer a consulta a cada vez q o usuário digitar, irá ter o alto processamento que é desvantajoso, pois a complexidade da minha consulta é de O(n^2), porque é uma consulta mais trabalhada com alto nível de relevância. Pra eu não fazer esta consulta toda vez, eu tenho que fazer ela apenas quando usuário vai fazer uma das duas coisas.

  1. Verificar quando ele pressionou a barra de espaço
  2. E quando o usuário terminou de digitar a palavra, e daí conta 5 segundos por exemplo, pra ele mandar informação

 

O 1 posso saber com:

if(event.keyCode == 32){
  noticia(dados);
}else{
...
}

 

Já o 2, a contagem tem que ser regressiva, quando chegar no 0 ele mandar fazer a consulta, mas enquanto usuário digitar, a cada vez que digitar este contador é voltado para o valor 5, pra ele não fazer a consulta, colocando um tipo de um break, para ele parar de fazer, e começar tudo de novo.

Seria tipo o negocio de leilão, cada vez que o usuário clica, o contador é reiniciado para 15 ou 20 segundos, só que no meu caso, é saber se alguma tecla foi pressionada, pra ele voltar a contagem tudo de novo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Francis Schiavo    1

Francis Schiavo
Postado

Indiferente do contador ser regressivo o codigo que postei espera sempre 5s. Quando o usuário pressiona uma tecla é zerado, chegando à 5 envia os dados.

Se passar de 5 não faz nada, só continua a contagem porque não removo o setInterval, mas se o usuário pressionar qualquer tecla o valor volta a zero.

 

Aqui estão algumas alterações que podem atender melhor a sua necessidade.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
   <title>Teste</title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <script type="text/javascript">
     // ID do intervalo
     var timer;
     // Contador de tempo
     var counter = -1;

     // Função executada após 5s de inatividade ou ao pressionar <space>
     function doIt() {
       input = document.getElementById('Teste');
       alert(input.value);
     }

     // Função para tratar o contador
     function onTimer(){
       // Se não está em estado de contagem, sai
       if (counter < 0)
         return;
       counter++;
       // Mostra o status do contador no titulo do documento (apenas para teste)
       document.title = counter;
       // Se passaram 5s
       if (counter == 5) {
         // Executa o código prédefinido
         doIt();
         // Desabilita o contador
         counter = -1;
       }
     }

     // Inicia o contador (onfocus)
     function startTimer(){
       // Força a execução da função onTimer a cada 1s
       timer = window.setInterval(onTimer, 1000);
     }

     // Para o contador (onblur)
     function stopTimer() {
       // Para a execução periódica da função onTimer
       window.clearInterval(timer);
       // Desabilita o contador (Caso o usuário de foco novamente ao campo)
       counter = -1;
       // Executa o código
       doIt();
     }

     // Reseta o contador (onkeyup)
     function handleKeyUp(e){
       keyCode = e ? e.which : event.keyCode;
       // Se for a barra de espaços
       if (keyCode == 32) {
         // Executa o código prédefinido
         doIt();
       }
       else
         // Reseta o contador
         counter = 0;
     }
   </script>
 </head>
 <body>
   <input type="text" name="inpTeste" id="Teste" onfocus="startTimer();" onblur="stopTimer();" />
   <script type="text/javascript">
     // Script para associar a função handleKeyUp de forma correta para podermos pegar o evento como parametro (window.event só funciona no IE)
     input = document.getElementById('Teste');
     input.onkeyup = handleKeyUp;
     // Esta associação pode ser feita em um <script> logo abaixo do input ou em uma função no onload do body.
     // Isso não pode ser feito antes que a tag <input> seja processada.
   </script>
 </body>
</html>

 

Em relação a barra de espaços a consulta será feita sempre que a barra de espaços for pressionada (Igual este código faz) ? Mesmo que o usuário continue digitando uma nova palavra ?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito