在某些情况下,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兼容性也是差不多的

contenteditable元素的placeholder输入提示语设置的更多相关文章

  1. eclipse中的输入提示怎么设置

    对于大多数的开发人员来说,打代码是一件非常繁琐的事情,eclipse中为我们提供了自动提示的功能,但是默认的提示只有当我们输入小数点后才能出现提示框,那么我们如何设置eclipse,能够让它为我们提示 ...

  2. 小tip: 如何让contenteditable元素只能输入纯文本

    div模拟textarea文本域轻松实现高度自适应 这篇文章发布于 2010年12月23日,星期四,22:07,归类于 css相关. 阅读 112630 次, 今日 40 次 by zhangxinx ...

  3. 如何让contenteditable元素只能输入纯文本

    本文出自张旭鑫博客,要知详情,请戳右侧地址:http://www.zhangxinxu.com/wordpress/?p=5120 一.温故而知新 很多年以前,稍等,让我搜一下contentedita ...

  4. uni-app开发经验分享十一: uniapp iOS云打包修改权限提示语

    打包提交appstore如果用到了如下权限需要修改提示语,详细描述使用这个权限的原因,如不修改提示语appstore审核可能会被拒绝.Apple的原则是,如果一个app想要申请用户同意某个隐私信息访问 ...

  5. 配置Info.plist (设置状态栏样式、自定义定位时系统弹出的提示语、配置3DTouch应用快捷菜单)

    一.概述 iOS中很多功能需要配置Info.plist才能实现,如设置后台运行.支持打开的文件类型.自定义访问隐私内容时弹出的提示等.了解Info.plist中各字段及其含义,可以访问苹果开发网站相关 ...

  6. h5输入框提示语 + 正常文本框提示语

    <input id="username" name="username" type="text" placeholder=" ...

  7. python 全栈开发,Day129(玩具开机提示语,为多个玩具发送点播,聊天界面,app录音,app与服务器端文件传输,简单的对话)

    一.玩具开机提示语 先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.2.zi ...

  8. 小程序根据input输入,动态设置按钮的样式

    [需求]实现当手机号已填写和协议已勾选时,“立即登录”按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <v ...

  9. web开发如何使用高德地图API(二)结合输入提示和POI搜索插件

    说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...

随机推荐

  1. java当中的强引用,软引用,弱引用,虚引用

    强引用,软引用,弱引用,虚引用:不同的引用类型主要体现在GC上 强引用:如果一个对象具有强引用,它就不会被垃圾回收器回收.即使当前内存空间不足,JVM也不会回收它,而是抛出 OutOfMemoryEr ...

  2. 设置TabWidget的样式的方法、关联Fragment与tabwidget的方法、点击tab显示相应Fragment方法

    private void updateTabHost(TabHost tabHost) { int count = tabHost.getTabWidget().getChildCount(); ; ...

  3. T-SQL:SQL语句处理顺序的坑(四)

    首先看下面一条比较完成语句,都是比较常见的关键字. USE Temp; SELECT empid, YEAR(orderdate) AS orderyear, COUNT(*) AS numorder ...

  4. Maven(六)Eclipse使用Maven插件创建项目

    1. 创建Maven版Java工程 1.1 具体步骤 1.2 更改默认JDK版本 默认JDK版本过低 可以通过配置setting.xml来更改JDK版本 加入如下代码 <profile> ...

  5. 汇编语言--微机CPU的指令系统(五)(标志位操作指令)

    (2)标志位操作指令 标志位操作指令是一组对标志位置位.复位.保存和恢复等操作的指令. 1.进位CF操作指令 Ø 清进位指令CLC(Clear Carry Flag):CF←0 Ø 置进位指令STC( ...

  6. Django之模板

    Django模板系统 官方文档 常用语法 Django模板中只需要记两种特殊符号: {{  }}和 {% %} {{ }}表示变量,在模板渲染的时候替换成值,{% %}表示逻辑相关的操作. 变量 {{ ...

  7. 搞清Image加载事件(onload)、加载状态(complete)后,实现图片的本地预览,并自适应于父元素内(完成)

    onload与complete介绍 complete只是HTMLImageElement对象的一个属性,可以判断图片加载完成,不管图片是不是有缓存:而onload则是这个Image对象的load事件回 ...

  8. cf438E. The Child and Binary Tree(生成函数 多项式开根 多项式求逆)

    题意 链接 Sol 生成函数博大精深Orz 我们设\(f(i)\)表示权值为\(i\)的二叉树数量,转移的时候可以枚举一下根节点 \(f(n) = \sum_{w \in C_1 \dots C_n} ...

  9. css不受高度限制实现文本超出隐藏并以省略号结束

    文本超出省略号显示代码: overflow: hidden; text-overflow:ellipsis; white-space: nowrap;width: 100px; /*宽度做好限制*/ ...

  10. win7下利用ftp实现华为路由器的配置文件上传和下载

    win7下利用ftp实现华为路由器的配置文件上传和下载 1.  Win7下ftp的安装和配置 (1)开始—>控制面板—>程序—>程序和功能—>打开或关闭Windows功能 (2 ...