Jquery 如何将背景文本添加到textarea标记？

您知道，可以使用以下方法将图像添加为textarea的背景图像：

textarea {
 background:#fff url(background.png) no-repeat center scroll; 
}

如何将文本（不是图像，也不是作为图像的文本）作为textarea的背景

它不是文本区域本身包含的文本。后面是一些文字。用户可以在文本区域中书写，就像背景图像一样，可以看到后面的背景文本

---

首选CSS2，CSS3和js可以。

占位符属性如何：

<textarea rows="5" cols="30" placeholder="enter optional message"></textarea>

---

您可以通过div和定位演示来完成

---

我能想到的唯一方法就是手动将一些文本放置在一个固定的位置

HTML:

---

有一种蛮力方法：

<div class="wallpapered">
    <div class="background">Some background text...</div>
    <textarea></textarea>
</div>

---

不要认为您可以向任何元素添加背景文本。感谢建议使用textarea占位符属性的人。这不是问题的答案，但知道和使用它是一个很酷的技巧！！（你可以在那里查看：）@Cedrice

placeholder

和

background image

没有任何关系，你也提到了在OP中看到背景文本。

placeholder

在文本区域被聚焦时会熄灭。在我看来，你可以使用placeholder属性并使用JS工具来填充不受支持的浏览器。如果您在项目中使用jQuery，您可能会使用类似于Yeah的东西。当然，有很多占位符多边形填充，例如：@Mindbreaker，不确定什么是不正确的，caniuse验证了IE当前版本中根本不支持它。@jason，但整个“当前”行是绿色的。这意味着它得到了广泛的支持。你这样做，你就消除了对所有使用IE7、8和9的人的支持。我之前同意polyfills可以帮助实现这一点，但这并不能改变它们不受支持的事实。信不信由你，不是每个人都有最新的浏览器。除此之外，占位符元素并不能完全回答他的问题。占位符的要点不是用于背景，而是取代开发人员以前用于占位符的onblur/onfocus hack。一旦文本字段被聚焦，占位符文本将消失，而不是留在背景中。这只是我想与提问者分享的一个解决方案。但如果你发表评论说“这没有得到广泛支持”，这是一个错误的断言。

 <textarea>This is text</textarea>
 <div class="bgtext">
     this is background text
 </div>

 .bgtext {
     position: fixed;
     top: 15px;
     left:10px;
     opacity: 0.4; /*optional*/
 }

<div class="wallpapered">
    <div class="background">Some background text...</div>
    <textarea></textarea>
</div>

.wallpapered {
    width: 400px;
    height: 300px;
    position: relative;
    outline: 1px dashed blue;
}
.wallpapered textarea {
    width: inherit;
    height: inherit;
}
.wallpapered .background {
    position: absolute;
    top: 0;
    left: 0;
    color: gray;
}