HTML5 将占位符属性添加到 LI答案

【问题标题】：HTML5 Adding placeholder attr to LIHTML5 将占位符属性添加到 LI
【发布时间】：2015-11-05 00:59:49
【问题描述】：

我需要弄清楚是否有可能，以及如何能够在 html5 <li> 的列表项元素上使用占位符文本等功能。它的功能需要与文本字段或文本区域中的占位符相同，即在查询 li 的内容时不计为文本，但在 <li> 为空时显示。

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

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

这很容易做到吗？如果是这样，有人可以分享最好的方法吗？

我正在尝试在 quill WYSIWYG html 编辑器中使用它，因此可能选择有限。

【问题讨论】：

你不能给 li 元素添加占位符看看文档。 w3.org/html/wg/drafts/html/master/… 我建议你使用标签或 title 属性。
你能举例说明你的意思吗？
看看@RGraham 的回答。它会解决你的问题。

标签： javascript html placeholder

【解决方案1】：

如果你可以使用 CSS3，你可以结合使用:empty、:after 伪选择器和content：

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

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

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

【讨论】：

我打算用纯 Javascript 方法回答，但这个似乎更合适
不错的一个。我也在创建一个 javascript 方法。