Show text when typing in textarea

Question

Consider the following example:

I have a textarea that, when the user enters something on it, a small text just below should be displayed, and at a certain time after the user has finished typing his phrase, the text should disappear!

I even got something here, look: jsfiddle

But when typing the text has a small effect that I do not like! The text is kind of 'appearing and disappearing' very fast, I just want to type the text to appear and to stop it disappearing, with a delay in the meantime.

Answer 1

Put a .stop(true) before the animations: (jsfiddle)

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

The .stop() for the animations performed, using true as argument will also clear the queue of animations, preventing old animations to be executed.

Answer 2

_{I’m willing! And since it’s completely different from the first answer:}

You don’t need to use jQuery: use CSS3 and if you need to, Vanilla JS or its equivalent in jQuery:

Show text while textarea has focus no need for JS: (jsbin)

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

Show text while textarea is being edited uses little 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 or Zepto:

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

Editing: while I was writing this wall of code other people ventured into using CSS3, so I leave a hint to the author: prefix.

Answer 3

Function that can be reused in n other textareas:

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

Basically what the function will do is fire a timeout and remove the timeout each time a key is pressed with the textarea in focus, that is, it restarts the counter that will disappear with the text, preventing the text from being "flashing".

Example: FIDDLE

Answer 4

The html:

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

the 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"
 }

Answer 5

Besides using a .stop() i inserted the setTimeOut() to control the "disappear" of the text

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

You can see the code working here