纯CSS模拟div元素placeholder属性

马黑黑

利用伪元素实现div元素的placeholder属性

HTML元素里头，文本框如 input[type=text] 和 textarea 拥有 placeholder 属性，该属性用于设置元素文本内容为空时所显示的提示文本，增强人机交互友好性。div 元素则没有此属性，需要另寻他径。

实现方法不止一种，最简单、性能也最好的当属纯 CSS 实现方式。请看代码：

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

【代码解释】

核心在 CSS .myDiv:empty::before 选择器的设置,该设置首先使用伪类 :empyt 来设定 div 元素渲染伪元素的条件，即内容为空时；接着设置伪元素的 ::before ，有内容、定位、前景色等属性。

JS代码并未参与模拟 placeholder 属性的设置，在这里它只是协助实现演示。函数 toggleContent(elm) 所实现的功能很简单：判断 elm 元素内容是否为空，如是，令其为预设的内容，反之令其内容为空。

马黑黑

演示：