论坛 › 马黑黑教程专版 › 纯CSS模拟div元素placeholder属性

马黑黑 发表于 2026-2-12 13:59

纯CSS模拟div元素placeholder属性

<style>
        #showDiv { font-size: 18px; }
        #showDiv p { margin: 0 10px; }
        #showDiv code { background: #afeeee; padding: 2px 4px; tab-size: 4; }
</style>

<div id="showDiv"><h1>利用伪元素实现div元素的placeholder属性</h1>
<p>HTML元素里头，文本框如 <code>input</code> 和 <code>textarea</code> 拥有 <code>placeholder</code> 属性，该属性用于设置元素文本内容为空时所显示的提示文本，增强人机交互友好性。<code>div</code> 元素则没有此属性，需要另寻他径。</p>
<p>实现方法不止一种，最简单、性能也最好的当属纯 CSS 实现方式。请看代码：</p>
<pre><code>&lt;style&gt;
        .myDiv {
                margin: 10px auto;
                width: 600px;
                height: 200px;
                border: 1px solid gray;
                padding: 20px;
                position: relative;
        }
        .myDiv:empty::before {
                content: '尚未创建内容，请点击创建';
                position: absolute;
                color: #999;
        }
&lt;/style&gt;

&lt;div class="myDiv"&gt;&lt;/div&gt;

&lt;script&gt;
        const myDiv = document.querySelector('.myDiv');
        myDiv.onclick = () =&gt; toggleContent(myDiv);

        function toggleContent(elm) {
                const content = '内容已创建，单击清除';
                elm.textContent = elm.textContent === '' ? content : '';
        }
&lt;/script&gt;
</code></pre>
<p>【<strong>代码解释</strong>】</p>
<p>核心在 CSS <code>.myDiv:empty::before</code> 选择器的设置,该设置首先使用伪类 <code>:empyt</code> 来设定 div 元素渲染伪元素的条件，即内容为空时；接着设置伪元素的 <code>::before</code> ，有内容、定位、前景色等属性。</p>
<p>JS代码并未参与模拟 placeholder 属性的设置，在这里它只是协助实现演示。函数 <code>toggleContent(elm)</code> 所实现的功能很简单：判断 elm 元素内容是否为空，如是，令其为预设的内容，反之令其内容为空。</p>
</div>

马黑黑 发表于 2026-2-12 14:00

<h2>演示：</h2>
<br><br>

<style>
        .myDiv {
                margin: 10px auto;
                width: 600px;
                height: 200px;
                border: 1px solid gray;
                padding: 20px;
                position: relative;
        }
        .myDiv:empty::before {
                content: '尚未创建内容，请点击创建';
                position: absolute;
                color: #999;
        }
</style>

<div class="myDiv"></div>

<script>
        const myDiv = document.querySelector('.myDiv');
        myDiv.onclick = () => toggleContent(myDiv);

        function toggleContent(elm) {
                const content = '内容已创建，单击清除';
                elm.textContent = elm.textContent === '' ? content : '';
        }
</script>

杨帆 发表于 2026-2-12 16:52

马老师厉害~让div元素有了placeholder属性，若能输入内容就更好了{:4_173:}

马黑黑 发表于 2026-2-12 18:38

杨帆 发表于 2026-2-12 16:52
马老师厉害~让div元素有了placeholder属性，若能输入内容就更好了

可编辑的 div 非常简单，你可以尝试一下：

<div id="editer" contenteditable="true"></div>

就这么简单。但是，要控制好它，则需要下功夫了

杨帆 发表于 2026-2-12 19:16

马黑黑 发表于 2026-2-12 18:38
可编辑的 div 非常简单，你可以尝试一下：




好的，谢谢马老师，我试一下可编辑的 div{:4_172:}

马黑黑 发表于 2026-2-12 22:35

杨帆 发表于 2026-2-12 19:16
好的，谢谢马老师，我试一下可编辑的 div

这个很有意思的，很容易实现所见即所得的编辑效果。唯一的难题是对其结果的处理。

杨帆 发表于 2026-2-12 22:45

马黑黑 发表于 2026-2-12 22:35
这个很有意思的，很容易实现所见即所得的编辑效果。唯一的难题是对其结果的处理。

有趣，谢谢老师答疑解惑{:4_180:}

红影 发表于 2026-2-13 18:13

仔细学习了，仍然没弄懂这个模拟是做什么用的，不好意思{:4_204:}

马黑黑 发表于 2026-2-13 20:42

红影 发表于 2026-2-13 18:13
仔细学习了，仍然没弄懂这个模拟是做什么用的，不好意思

也许你用不上。不过，如果确实想了解，可以看一下Markdown在线编辑器的预览区，看有内容和没有内容时的区别。

马黑黑 发表于 2026-2-13 20:42

杨帆 发表于 2026-2-12 22:45
有趣，谢谢老师答疑解惑

{:4_190:}

查看完整版本: 纯CSS模拟div元素placeholder属性