HTML5将占位符attr添加到LI

Question

我需要弄清楚是否有可能，以及如何在html5 <li>中的列表项元素上使用占位符文本。它需要以与textfield或textarea中的占位符相同的方式运行，即在查询li的内容时不计入文本，但在<li>为空时显示。

我希望能够做到这样的事情：

<li placeholder="This is the template for your input"/>

这可以轻松完成吗？如果是这样，有人可以分享最好的方法吗？

我正在尝试使用这个内部羽毛笔WYSIWYG html编辑器，因此可能选择有限。

Answer 1

如果您可以使用CSS3，则可以将:empty，:after伪选择器与content结合使用：

＆＃13;

＆＃13;

console.log(document.querySelector("li").textContent); // Doesn't see the CSS content
setTimeout(function() {
  document.querySelector("li").textContent = "test";
}, 2000);

＆＃13;

li:empty:after {
    content: "This is the template for your input";
}

＆＃13;

<ul>
    <li></li>
</ul>

＆＃13;

＆＃13;

＆＃13;