Zrób tekst Zaniknij na typie

Question

to jest dla osobistego projektu artystycznego. Zasadniczo chcę utworzyć pustą stronę internetową, na której użytkownik może wpisać tekst (np. Edytor tekstu), ale tekst powinien zanikać podczas pisania.

Po zaniknięciu nie chcę, aby użytkownik mógł zobaczyć tekst, który właśnie napisał. Tak więc nie chcę po prostu zmieniać koloru czcionki tak, aby pasowała do koloru tła, ponieważ użytkownik może ponownie wybrać tekst.

Do tej pory zrobiłem textarea, że ​​na keyup będzie przechowywać dane wejściowe, które będą wyświetlane w oddzielnym div. W JavaScriptu określiłem, że kiedy wprowadzony tekst osiągnie określoną długość: element div zniknie, usunie tekst i pojawi się ponownie, aby wyświetlić bieżące wprowadzanie tekstu. Problem polega na tym, że zgodnie z konsolą nie mogę wyczyścić wartości div. Czy to ma sens?

Oto skrzypce: 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"); 
    } 
    }); 

Proszę dać mi znać, jeśli istnieje lepszy sposób mogę podejść do tego.

Answer 1

Jeśli dobrze cię zrozumiałem, powinno to zadziałać. Będziesz chciał użyć innerHTML zamiast wartości.

Spróbuj zmienia:

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

do tego:

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

użyć value dla pól wejściowych i innerHTML dla pól non-wejściowych.

---

Opcja 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"); 
    } 



}); 

---

Opcja 2: Przykład ten Z ALEX CASSEDY - jeśli jego lepszą odpowiedź, dać mu kredytowego i nie kopalnianego, po prostu zamocowane jedna RZECZY, ŻE TO DZIAŁA.

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

spróbować czegoś takiego:

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

Jest to najbliżej stałam:

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

});