javascript - HTML5 向 LI 添加占位符属性

Question

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

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

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

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

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

Answer 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>