Make Text Fade Out on Type

Question

this is for a personal art project. What I basically want to do is create a blank web page where a user can type in text (like a text-editor), but have the text fade out as they type.

By fade out, I don't want the user to have the ability to see the text they had just written. So, I don't want to just transition the font color to match the background color as the user can select the text again.

So far, I've made a textarea that on keyup will store the text input, which will show in a separate div. I've specified in Javascript that when the entered text has reached a certain length: the div will fade out, clear the text, and show up again to show the current text input. The problem is that according to the console, I can't clear the value of the div. Does this make sense?

Here is a fiddle: http://jsfiddle.net/anelec/k40p72xk/5/

HTML:

<textarea type='text' id='myinput'></textarea>
<div><span id="fade"></span></div>

Javascript:

    //on keyup store text input into a variable "text"
    $( "#myinput" ).keyup(function( event ) {       
    var text = $("#myinput").val();
    console.log("event working");
    console.log(text);

    //show values of "text" variable in id "fade"
    $("#fade").text(this.value);
    var fade = $("#myinput").val();

   //function to clear text value of id "fade"
   function cleartext(){
   document.getElementById("#fade").value="";  
   }

   //clear text value of id "fade" after 15 letters
   if (fade.length >=15) {
   $("#fade").fadeOut(200);
   cleartext();
   }

   //show the incoming text input somehow
   if (fade.length <=15) {
   $("#fade").fadeIn("fast");
   }
   });

Please let me know if there is a better way I can approach this.

Answer 1

Try something like this:

// Keep track of how many sets of 15 chars there are
var accum = 0;

// If the length is divisible by 15
if (text.length % 15 == 0) {
    $("#fade").fadeOut(200, function() {
        accum ++; 
        // $(this) refers to $("#fade")
        $(this).val(''); // set the value to an empty string
    });
} else {
    $("#fade").fadeIn('fast');
}

// Use the substring method to get every 15 characters to display in #fade
var start = accum * 15,
    end   = (accum + 1) * 15,
    next  = text.substring(start, end);

$("#fade").text(next);