<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
[contenteditable=true]:empty:before {
content: attr(placeholder);
pointer-events: none;
display: block;
/* For Firefox */
}
/* */
div[contenteditable=true] {
border: 1px dashed #AAA;
width: 290px;
padding: 5px;
}
pre {
background: #EEE;
padding: 5px;
width: 290px;
}
</style>
</head>
<body translate="no">
<h1>对contentEditable元素的占位符支持,不使用JavaScript</h1>
<div contenteditable="true" placeholder="Enter text here..."></div>
<p>
添加一下样式就行了:
</p>
<pre>[contenteditable=true]:empty:before {
content: attr(placeholder);
pointer-events: none;
display: block; /* For Firefox */
}
</pre>
<h2>Notes</h2>
<ul>
<li>可以添加与实际文本不同的样式,如不透明度、斜体等</li>
<li>如果你的html需要100%兼容,你可以在两个文件上用“占位符”替换“数据占位符”
</li>
<li>在某些情况下,Chrome会在contentEditable元素中添加<br/>,从而破坏:空检查。</li>
<li>指针事件:不存在,因此光标在悬停时是正确的
</li>
</ul>
</body>
</html>
网友回复
如何修改别人发给我的微信笔记内容?
fbx、obj、glb三维格式模型如何在浏览器中通过three相互转换格式?
python如何实现基于http隧道加密的正向代理服务?
有没有有专门针对 UI 界面截图进行智能标记(Set-of-Mark, SoM) 的开源库和工具?
如何用python实现Set-of-Mark (SoM) 技术?
python如何截取windows指定应用的窗口截图,不用管窗口是不是在最前面?
linux能不能给rm删除命令增加回收站功能,可恢复被删文件?
bfwsoa如何在命令行中执行控制器动作器方法?
RAG(检索增强生成)和 KG(知识图谱)有啥不同?
KVM硬件是啥?


