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,一经查实,立即删除!

相关文章

CF 961E Tufurama

JYZdalao上课讲了这道题&#xff0c;觉得很好可做 其实也是一道理解了就水爆了的题目 把题意抽象化&#xff0c;可以发现题目求的满足 i<ja[i]>ja[j]>i的i&#xff0c;j对数。由于i&#xff0c;j顺序问题&#xff0c;可以在不考虑i&#xff0c;j顺序的情况下将ans>…

使用JCA的密码术–提供者中的服务

Java密码体系结构&#xff08;JCA&#xff09;是一个可扩展的框架&#xff0c;使您能够使用执行加密操作。 JCA还促进实现独立性&#xff08;程序不应该在乎谁提供加密服务&#xff09;和实现互操作性&#xff08;程序不应该与特定加密服务的特定提供者联系在一起&#xff09;。…

IE浏览器支持响应式网站设计

目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局&#xff0c;其理念是&#xff1a;集中创建页面的图片排版大小&#xff0c;可以智能地根据用户行为以及使用的设备环境进行相对应的布局。 但是, 响应式设计并不能原…

python循环for不从零开始_Python-多处理-巨大的for循环

下午好&#xff0c;我对Python还是很陌生&#xff0c;我必须解决一个需要尝试数十亿个假设的问题...更具体地说&#xff0c;我需要迭代440个元素的列表&#xff0c;但我需要这样做8次...(是的&#xff0c;我知道OS迭代的次数完全是疯狂的。我的机器相当不错&#xff0c;所以我想…

Bridge Across Islands POJ - 3608 凸多边形间最小距离/旋转卡壳

旋转的部分始终感觉有点别扭。。后来发现是因为叉积顺序为负。。 所以让三角形面积逐渐变大实际上就是让三角形面积变小&#xff08;绝对值意义上的&#xff09;&#xff0c;这样就是让高变小了。。 至于为什么要选最下和最上。。应该是为了满足两条线始终可以生成所有多边形间…

绑定到JSON和XML –处理集合

EclipseLink JAXB&#xff08;MOXy&#xff09;的优势之一是能够通过一组元数据将对象模型映射到JSON和XML。 一个弱点是您需要在JSON键或XML元素上折衷集合属性。 我很高兴地说这个问题已经在EclipseLink 2.5&#xff08;和EclipseLink 2.4.2&#xff09;中得到解决&#xff0…

【WIP】Bootstrap 基础

创建: 2017/09/28 更新: 2017/10/14 标题加上【WIP】转载于:https://www.cnblogs.com/lancgg/p/8281714.html

xml mysql 模糊查询_mybatis+Spring mysql的模糊查询问题

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼查询的mapping.xml语法resultType"java.lang.Integer">SELECTcount(yy_id)FROMmc_usersystem_version like CONCAT(%,${system_version },% )比如当我为字段 system_version 赋值为 ”3512“ 的时候 能查询出来若是我…

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;所以得到…

jq实现点击某元素之外触发事件

1 $(document).bind("click",function(e){ 2 var target $(e.target); 3 if(target.closest("#parentId").length 0){//点击id为parentId之外的地方触发 4 layer.close(tip_index); 5 type0; 6 } 7 }) …

mysql数据库连接时区设置_springboot 连接数据库之时区设置

抽空查看以前的开发日志&#xff0c;发现了一些“问题”日志&#xff0c;决定整理后陆陆续续发出来吧&#xff0c;也为有需要的话小伙伴提供点帮助。在springboot启动之时&#xff0c;报错了&#xff0c;一看应该就是连接MySql数据库时出的问题。create connection SQLExceptio…

【HTML基础】表格和表单

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

定义EJB 3.1视图(本地,远程,无接口)

这篇文章将讨论使用批注定义EJB视图的可能方法&#xff08;最后我将只提到使用EJB部署描述符&#xff09;。我将重点介绍最新的EJB 3.1视图&#xff0c;这些视图将省略旧的本地&#xff0c;远程和本地接口。 因此&#xff0c;我们可以选择&#xff1a; 远程业务界面视图&#…

小鱼的数字游戏

题目描述 小鱼最近被要求参加一个数字游戏&#xff0c;要求它把看到的一串数字&#xff08;长度不一定&#xff0c;以0结束&#xff0c;最多不超过100个&#xff0c;数字不超过2^32-1&#xff09;&#xff0c;记住了然后反着念出来(表示结束的数字0就不要念出来了)。这对小鱼的…

iview给radio按钮组件加点击事件

<RadioGroup v-model"formValidate.phone"><Radio label"phone">商家电话</Radio><Radio label"leaderPhone">负责人电话</Radio><span click"inputPhone()"><Radio label"newPhone"…

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 …

EJB继承与Java继承不同

尽管EJB继承有时使用Java继承&#xff0c;但它们并不总是相同的。 就像您在我以前的文章中可以读到的那样 &#xff0c;EJB不必实现任何接口即可公开业务接口。 另一种方法也是正确的-仅仅是因为EJB实现了某个接口或扩展了其他EJB并不意味着它公开了全部或任何视图。 假设我们…