Crea testo in dissolvenza sul tipo

Question

questo è per un progetto artistico personale. Quello che fondamentalmente voglio fare è creare una pagina web vuota in cui un utente possa digitare del testo (come un editor di testo), ma avere il testo sfumato durante la digitazione.

In chiusura, non voglio che l'utente abbia la possibilità di vedere il testo appena scritto. Quindi, non voglio solo passare il colore del carattere per abbinare il colore di sfondo, in quanto l'utente può selezionare nuovamente il testo.

Finora, ho creato un'area di testo che su keyup memorizzerà l'input di testo, che verrà mostrato in un div separato. Ho specificato in Javascript che quando il testo inserito ha raggiunto una certa lunghezza: il div scompare, cancella il testo e mostra di nuovo per mostrare il testo attuale. Il problema è che secondo la console, non posso cancellare il valore del div. Ha senso ciò?

Ecco un violino: 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"); 
    } 
    }); 

Si prega di farmi sapere se c'è un modo migliore che posso avvicinarmi a questo.

Answer 1

Se ho capito bene, questo dovrebbe funzionare. Ti consigliamo di utilizzare innerHTML anziché il valore.

Prova a cambiare:

function cleartext(){ 
    document.getElementById("#fade").value=""; 
    } 

a questo:

function cleartext(){ 
    document.getElementById("#fade").innerHTML=""; 
    } 

È possibile utilizzare value per i campi di input, e innerHTML per i campi non-input.

---

Opzione 1:

$("#myinput").keyup(function(event) {  

     var text = $("#myinput").val(); 
     console.log("event working"); 
     console.log(text); 

     $("#fade").text(this.value); 
     var fade = $("#myinput").val(); 


function cleartext(){ 
     document.getElementById("fade").innerHTML=""; 

     // you use value this time because it's input field 
     document.getElementById("myinput").value = ""; 
} 


    if (fade.length >=15) { 
     $("#fade").fadeOut(200); 
     cleartext(); 
    } 


    if (fade.length <=15) { 
      $("#fade").fadeIn("slow"); 
    } 



}); 

---

Opzione 2: questo esempio da ALEX Cassedy - SE LA RISPOSTA AL MEGLIO, dargli credito e non la mia, ho semplicemente quella fissa COSA SU DI ESSO FUNZIONA.

$("#myinput").keyup(function(event) {  

     var text = $("#myinput").val(); 
     console.log("event working"); 
     console.log(text); 

     $("#fade").text(this.value); 
     var fade = $("#myinput").val();  

    // 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 next = text.substring(fade.length - 15); 

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

}); 

Answer 2

provare qualcosa di simile:

// 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); 

Answer 3

Questo è il più vicino che ho ottenuto:

Javascript:

$("#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(); 


if (text.length >=5) { 
    $("#fade").fadeTo(600,0); 
     $(this).val(""); 
    $("#fade").fadeTo(20,1); 
} 

});