contenteditable元素的placeholder输入提示语设置

在某些情况下,textarea是不够用的,我们还需要显示一些图标或者高亮元素,这就需要用富文本编辑器,而富文本编辑器本质上是HTML元素设置了contenteditable。

然后可能需要像input、textarea有placeholder的输入提示语,但contenteditable的元素,placeholder是没用的,需要另外办法。

例子:

HTML:

<div class="con" contenteditable="true"></div>

CSS:

.con{width: 400px;height: 400px;border: 1px solid #4ec844;outline: none;
}
.con:empty:before{ content: '说点啥好呢?'; color: gray; 
} 
.con:focus:before{content:none;
}

:empty浏览器兼容性

PS::focus兼容性也是差不多的

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369111.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

css 浮动和清除浮动

在写页面布局的过程中&#xff0c;浮动是大家经常用的属性。在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动。 在我学习浮动的时候可是熬坏了脑筋&#xff0c;在这里我分享一下我对浮动这块知识的总结。 一、浮动的定义 使元素脱离文档流&#xff0c;按…

Java Code Geeks和Packt提供的Hadoop书籍赠品

亲爱的极客&#xff0c;由于参与度很高&#xff0c;并且为了有机会赢得尽可能多的Hadoop粉丝&#xff0c;我们决定将竞赛延长一个星期&#xff0c;直到下周二。 各位极客&#xff0c; 赠品在Java Code Geeks上继续。 我们很高兴地宣布&#xff0c;我们再次与Packt Publishin…

【转】 差分约束系统详解(转化为最短路) (概念)

---恢复内容开始--- 转自&#xff1a;http://www.cnblogs.com/void/archive/2011/08/26/2153928.html 差分约束系统中&#xff1a; 如果求未知数的最大值&#xff0c;那么按小于等于建图后求最短路即可。&#xff08;因为求最短路是由无穷向下约束而得到的&#xff0c;所以得到…

【HTML基础】表格和表单

本次博客的主要内容如下&#xff1a; meta和link表格表单 meta和link meta meta的属性有两种&#xff1a;name和http-equiv。 name属性主要用于描述网页内容&#xff0c;对应与网页内容。 1.关键字&#xff0c;当搜索引擎在爬取内容的时候&#xff0c;会根据关键字判断&a…

python json 不好用_Python之json使用

一、概念json是一种通用的数据类型&#xff0c;任何语言都认识接口返回的数据类型都是json长得像字典&#xff0c;形式也是k-v { }其实json是字符串字符串不能用key、value来取值&#xff0c;要先转成字典才可以格式如下&#xff1a;{"error_code": 0,#要使用双引号&…

jstack命令(Java Stack Trace)

转&#xff1a;http://blog.csdn.net/fenglibing/article/details/6411940 JDK内置工具使用 一、javah命令(C Header and Stub File Generator) 二、jps命令(Java Virtual Machine Process Status Tool) 三、jstack命令(Java Stack Trace) 四、jstat命令(Java Virtual Machine …

链式存储mysql_链栈:栈的链式存储结构

前面讲完了栈的顺序存储结构&#xff0c;我们现在来看看栈的链式存储结构&#xff0c;简称为链栈。链栈是没有附加头结点的运算受限的单链表。栈顶指针就是链表的头指针。栈是用栈顶来做插入和删除操作&#xff0c;那么对于链栈的栈顶放在链表的头部还是尾部呢&#xff1f;单链…

树状数组 学习笔记

树状数组可以用来求区间元素的和。与前缀和做法不同&#xff0c;它支持值的修改。比如说&#xff0c;现在我有一个数列a&#xff0c;要求你维护这个数列&#xff0c;使其支持两个操作。1.改变数列第k项的值2.查询从第i项到第j项的总值暴力做法总是过不了所有点的&#xff0c;如…

iOS动画-从UIView到Core Animation

首先&#xff0c;介绍一下UIView相关的动画。 UIView普通动画&#xff1a;[UIView beginAnimations: context:];[UIView commitAnimations]; 动画属性设置&#xff1a; 1 //动画持续时间2 [UIView setAnimationDuration:(NSTimeInterval)];3 //动画的代理对象4 …

201621123055《JAVA程序设计》第三周学习总结

1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词。 答&#xff1a;类、对象、关键字等。1.2 用思维导图或者Onenote或其他工具将这些关键词组织起来。(注&#xff1a;首次使用&#xff0c;不太会用软件&#xff09; 2. 书面作业 1.以面向对象方式改造数据结构…

通过运行示例从WSO2 ESB开始

我最近加入了一个新任务&#xff0c;在该任务中&#xff0c;我们必须基于WSO2工具栈实施ESB解决方案。 尽管我熟悉ESB的大多数概念以及其他一些实现&#xff08;例如Mule ESB &#xff09;&#xff0c;但这是我第一次必须使用WSO2 ESB 。 幸运的是&#xff0c;可以找到很多文档…

爬虫(十二):scrapy中spiders的用法

Spider类定义了如何爬去某个网站&#xff0c;包括爬取的动作以及如何从网页内容中提取结构化的数据&#xff0c;总的来说spider就是定义爬取的动作以及分析某个网页 工作流程分析 以初始的URL初始化Request&#xff0c;并设置回调函数&#xff0c;当该request下载完毕并返回时&…

position:fixed 兼容浏览器低版本

项目中遇到的坑&#xff0c;写篇博客做个笔记纪念下&#xff0c;position: fixed一般来说都兼容各个浏览器&#xff0c;但是要兼容浏览低版本问题&#xff0c;就得用-webkit-transform: translateZ(0);这段代码了。 项目中用到position: fixed;z-index: xxx;的时候&#xff0c;…

监控java_Java应用程序监控JavaMelody

JavaMelody是运行在Java Web容器中&#xff0c;用来监控Java内存和J服务器CPU使用情况&#xff0c;用户Session数量&#xff0c;JDBC连接数&#xff0c;和http请求、sql请求等的执行数量&#xff0c;平均执行时间&#xff0c;错误百分比等。图表可以按天&#xff0c;周&#xf…

【谈谈IO】BIO、NIO和AIO

BIO: BIO是阻塞IO&#xff0c;体现在一个线程调用IO的时候&#xff0c;会挂起等待&#xff0c;然后Thread会进入blocked状态&#xff1b;这样线程资源就会被闲置&#xff0c;造成资源浪费&#xff0c;通常一个系统线程数是有限的&#xff0c;而且&#xff0c;Thread进入内核态也…

css动画-模拟正余弦曲线

今天就写一个css3抛物线的动画吧 从左到右的抛物线动画&#xff0c;我们就暂且把动作分为匀速向右运动和变速的上下运动。 水平匀速运动我们可以利用 translateX(x)&#xff1a;定义 2D 转换&#xff0c;沿着 X 轴移动元素&#xff1b;以及linear&#xff1a;动画从头到尾的速…

java list 循环赋值_Java List集合的坑(add方法报空指针,循环赋值时list已保存的值会改变)...

先看空指针异常&#xff1a;ListmovieInfos null;这样创建时&#xff0c;list指向为空&#xff0c;修改方法&#xff1a;ListmovieInfos new ArrayList();再看list循环赋值的问题&#xff1a;问题描述&#xff1a;for (i0;i<10;i){movieInfoSum.movieId (int)recommendatio…

ros使用时的注意事项技巧

1.rosrun package-name executable-name 比如 rosrun turtlesim turtlesim_node 2.一旦启动roscore后,便可以运行ROS程序了。ROS程序的运行实例被称为节点(node)&#xff0c;roscore叫做节点管理器 3.查看节点列表rosnode list 4.需要注意节点名并不一定与对应可执行文件名称相…

Ubuntu+vscode打不开

前沿: vscode链接参考链接 问题: 之前在Ubuntu上安装chrome, 结果chrome没装成功, 还把vscode给qiu坏了, 貌似是当时安装chrome时提示要升级一个包. 后来发现当时是修改了libnss这个包的版本: 解决方法: # 将libnss给downgrade一下就OK了. sudo apt install libnss32:3.21-1ubu…

纯css隐藏移动端滚动条解决方案(ios上流畅滑动)

html代码展示&#xff08;直接复制代码保存至本地文件运行即可&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, init…