Question

这是个人艺术项目。我基本上想要做的是创建一个空白的网页，用户可以在其中键入文本（如文本编辑器），但文本在键入时会淡出。

通过淡出，我不希望用户能够看到他们刚写的文字。因此，我不想只是转换字体颜色以匹配背景颜色，因为用户可以再次选择文本。

到目前为止，我已经创建了一个textarea，在keyup上将存储文本输入，它将显示在一个单独的div中。我在Javascript中指定当输入的文本达到一定长度时：div将淡出，清除文本，然后再次显示以显示当前文本输入。问题是根据控制台，我无法清除div的值。这有意义吗？

这是一个小提琴：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");
   }
   });

请告诉我是否有更好的方法可以解决这个问题。

Answer 1

尝试这样的事情：

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

如果我理解正确，这应该有效。您将要使用innerHTML而不是value。

尝试更改：

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

到此：

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

您对输入字段使用value，对非输入字段使用innerHTML。

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



});

选项2：这个例子来自 ALEX CASSEDY - 如果它是更好的答案，给他的信用而不是我的，我简单地固定了一件事，因为它的工作原理。

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

这是我最接近的：

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

});

使文本淡出类型

3 个答案: