Consider the following example:
I have a textarea which, when the user types something in it, a small text just below it should be displayed, and at a certain time after the user finishes entering his sentence, / p>
I even got something here, see: jsfiddle
But typing text has a small effect that I do not like! The text gets kind of 'popping up and disappearing' too fast, I just want it to simply type in the text and stop it, with a delay in the meantime.
Put a .stop(true) before the animations: ( jsfiddle )
$('#myTextarea').on('keyup',function(){
$('#showedText').text('Just a test!')
.stop(true).fadeIn().delay(700).fadeOut();
});
.stop() for animations executed, using true as argument will also clear the queue of animations, avoiding that old animations are executed.
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 is going to do is to shoot a timeout and remove the old timeout every time a key is pressed with textarea in focus, ie, it restarts the counter that will disappear with the text, preventing the text from "blinking."
Example: FIDDLE
I am willing! And since it is completely different from the first abro as another answer:
You do not need to use jQuery: use CSS3 and, if you need to, Vanilla JS or its equivalent in jQuery:
Show text while textarea has focus does not need 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 used - 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 used - jQuery or Zepto:
var showedText = $('#showedText');
$('#myTextarea').on('keydown', function () {
showedText.addClass('editing');
setTimeout(function () {
showedText.removeClass('editing');
}, 500);
});
Editing: As I wrote this code wall other people ventured into using CSS3, so I leave a tip to the author: use prefixfree .
The 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"
}
In addition to using .stop() I've inserted 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