使文本在键入时淡出

Question

这是一个个人艺术项目。我基本上想做的是创建一个空白网页，用户可以在其中键入文本(就像文本编辑器一样)，但在键入时让文本淡出。

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

到目前为止，我已经制作了一个文本区域，在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

这是我得到的最接近的：

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

Answer 3

如果我理解正确，这应该会起作用。您将希望使用innerHTML而不是值。

尝试更改：

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