Javascript 使文本在打印时淡出
这是一个个人艺术项目。我基本上想做的是创建一个空白网页,用户可以像文本编辑器一样键入文本,但在键入时文本会淡出 通过淡出,我不希望用户能够看到他们刚刚写的文本。因此,我不想只是转换字体颜色以匹配背景色,因为用户可以再次选择文本 到目前为止,我已经创建了一个textarea,在keyup上存储文本输入,它将显示在一个单独的div中。我在Javascript中指定,当输入的文本达到一定长度时:div将淡出,清除文本,然后再次显示以显示当前文本输入。问题是,根据控制台,我无法清除div的值。这有意义吗 这是一把小提琴: HTML: Javascript:Javascript 使文本在打印时淡出,javascript,fadeout,textinput,Javascript,Fadeout,Textinput,这是一个个人艺术项目。我基本上想做的是创建一个空白网页,用户可以像文本编辑器一样键入文本,但在键入时文本会淡出 通过淡出,我不希望用户能够看到他们刚刚写的文本。因此,我不想只是转换字体颜色以匹配背景色,因为用户可以再次选择文本 到目前为止,我已经创建了一个textarea,在keyup上存储文本输入,它将显示在一个单独的div中。我在Javascript中指定,当输入的文本达到一定长度时:div将淡出,清除文本,然后再次显示以显示当前文本输入。问题是,根据控制台,我无法清除div的值。这有意义吗
//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");
}
});
$( "#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);
}
});
请让我知道是否有更好的方法来解决这个问题 如果我没听错的话,这应该行得通。您将希望使用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");
}
});
试着这样做:
// 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);
这是我得到的最接近的结果: 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");
}
});
$( "#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);
}
});
无法清除div的值的原因是您正在尝试document.getElementByIdfade.value=并且没有名为fade的元素。您正在尝试将jquery与普通javascript混合使用。试试$fade.text;相反,你的情况怎么样??你从未回来让我们知道,所以我假设我们的答案都不是你想要的?让我们知道,我们会毫不犹豫地帮助你。这帮了大忙!该值已清除,但现在如何使传入的文本再次显示?很抱歉延迟。我坐在办公室里,没有机会很快回复你。让我知道这是否是你想要实现的。如果没有,我们将为您解决,但请澄清您希望它如何运行。这个例子完全基于您在OP中键入的内容。嗯,我添加了这个,但它似乎只是让文本闪烁?在底部,删除开始和结束变量,然后在下面更改:var next=text.substringfade.length-15;这会让它像你期望的那样工作。我已经更新了我的答案,但是如果你最喜欢亚历克斯的答案,那就把它归功于他。嘿!对不起,这几天我真的很忙。非常感谢您的关注,我真不敢相信我得到了这么多帮助!我真的很感激。你和亚历克斯·卡塞迪的回答都越来越接近我想要的。我想我真的应该澄清一下我是如何可视化系统工作的:想象一个空白的白色页面,上面有一个闪烁的光标,用户可以在任意点输入,看到他们正在输入什么,2秒钟后,他们的输入消失。但是,光标会在上次键入的位置离开,并继续闪烁。