13

Considerem o seguinte exemplo:

Tenho uma textarea que, quando o usuário digitar algo nela, um pequeno texto logo abaixo deve ser exibido, e em determinado tempo após o usuário terminar de digitar sua frase, o texto deve desaparecer!

Eu até consegui algo aqui, vejam: jsfiddle

Porém ao digitar o texto tem um pequeno efeito que eu não gosto! O texto fica meio que 'aparecendo e sumindo' muito rápido, eu quero que simplesmente ao digitar o texto apareça e ao parar ele suma, com um delay nesse meio tempo.

1
  • 3
    Aviso: essa questão virou um Code Golf de jQuery. Quem se dispõe a resolver o problema sem usar jQuery!? (Dica: CSS3) Commented 6/03/2014 às 21:18

5 Respostas 5

5

Coloque um .stop(true) antes das animações: (jsfiddle)

$('#myTextarea').on('keyup',function(){
  $('#showedText').text('Just a test!')
    .stop(true).fadeIn().delay(700).fadeOut();
});

O .stop() para as animações executadas, usando true como argumento também irá limpar a fila de animações, evitando que animações antigas sejam executadas.

5

Eu me disponho! E já que é completamente diferente da primeira abro como outra resposta:

Você não precisa usar jQuery: use CSS3 e, caso precisar, Vanilla JS ou seu equivalente em jQuery:

Mostrar texto enquanto a textarea tiver foco não precisa de JS: (jsbin)

#showedText {
  opacity: 0;
  transition: opacity 1s 1s;
}
#myTextarea:focus + #showedText {
  opacity: 1; transition-delay: 0;
}

Mostrar texto enquanto a textarea estiver sendo editada usa pouco JS: (jsbin)

#showedText {
  opacity: 0;
  transition: opacity 1s 1s;
}
#showedText.editing {
  opacity: 1; transition-delay: 0;
}

JavaScript utilizado - Vanilla JS:

var myTextarea = document.getElementById('myTextarea');
var showedText = document.getElementById('showedText');
myTextarea.addEventListener('keydown', function () {
  showedText.className += ' editing ';
  setTimeout(function () {
    showedText.className = showedText.className
      .replace(/(^|\b)editing(\b|$)/g, '');
  }, 500);
});

JavaScript utilizado - jQuery ou Zepto:

var showedText = $('#showedText');
$('#myTextarea').on('keydown', function () {
  showedText.addClass('editing');
  setTimeout(function () {
    showedText.removeClass('editing');
  }, 500);
});

Edição: enquanto eu escrevia essa parede de código outras pessoas se aventuraram em usar CSS3, logo deixo uma dica ao autor: use prefixfree.

1
  • Boa demais a resposta apenas usando CSS3 ;) +1
    – Tiago P.C
    Commented 22/01/2016 às 15:53
4

Função que pode ser reutilizada em n outros textareas:

function mostratexto(el, txt, ms){
    var t;
    el.on('keyup',function(){
        clearTimeout(t);
        txt.fadeIn('slow');
        t = setTimeout(function(){
            txt.fadeOut('slow');
        }, ms);
    });
}

Basicamente o que a função vai fazer é disparar um timeout e remover o timeout antigo a cada vez que uma tecla for pressionada com o textarea em foco, ou seja, ela reinicia o contador que vai sumir com o texto, previnindo o texto de ficar "piscando".

Exemplo: FIDDLE

2

O html:

 <textarea onkeyup="stop()" onkeydown="start()">
 </textarea>
 <span id="span" style="opacity: 0">digitando...</span>

o javascript:

 function start(){
   var span = document.getElementById('span');
   span.style.opacity = "1";
   span.style.webkitTransition = "0.1s"
 }
 function stop(){
   var span = document.getElementById('span');
   span.style.opacity = "0";    
   span.style.webkitTransition = "1.5s"
 }
1

Além de usar um .stop() eu inseri o setTimeOut() para controlar o "desaparecer" do texto

$(function(){
    $('#myTextarea').on('keyup',function(){
        $('#showedText').text('Just a test!').stop().fadeIn(700, "linear");
    setTimeout(function(){$('#showedText').stop().fadeOut(700, "linear");},2000);
    });
});

Você pode ver o código funcionando aqui

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 .