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>

HTML5 向 LI 添加占位符属性

HTML5 Adding placeholder attr to LI

html

javascript

placeholder