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兼容性也是差不多的
contenteditable元素的placeholder输入提示语设置的更多相关文章
- eclipse中的输入提示怎么设置
对于大多数的开发人员来说,打代码是一件非常繁琐的事情,eclipse中为我们提供了自动提示的功能,但是默认的提示只有当我们输入小数点后才能出现提示框,那么我们如何设置eclipse,能够让它为我们提示 ...
- 小tip: 如何让contenteditable元素只能输入纯文本
div模拟textarea文本域轻松实现高度自适应 这篇文章发布于 2010年12月23日,星期四,22:07,归类于 css相关. 阅读 112630 次, 今日 40 次 by zhangxinx ...
- 如何让contenteditable元素只能输入纯文本
本文出自张旭鑫博客,要知详情,请戳右侧地址:http://www.zhangxinxu.com/wordpress/?p=5120 一.温故而知新 很多年以前,稍等,让我搜一下contentedita ...
- uni-app开发经验分享十一: uniapp iOS云打包修改权限提示语
打包提交appstore如果用到了如下权限需要修改提示语,详细描述使用这个权限的原因,如不修改提示语appstore审核可能会被拒绝.Apple的原则是,如果一个app想要申请用户同意某个隐私信息访问 ...
- 配置Info.plist (设置状态栏样式、自定义定位时系统弹出的提示语、配置3DTouch应用快捷菜单)
一.概述 iOS中很多功能需要配置Info.plist才能实现,如设置后台运行.支持打开的文件类型.自定义访问隐私内容时弹出的提示等.了解Info.plist中各字段及其含义,可以访问苹果开发网站相关 ...
- h5输入框提示语 + 正常文本框提示语
<input id="username" name="username" type="text" placeholder=" ...
- python 全栈开发,Day129(玩具开机提示语,为多个玩具发送点播,聊天界面,app录音,app与服务器端文件传输,简单的对话)
一.玩具开机提示语 先下载github代码,下面的操作,都是基于这个版本来的! https://github.com/987334176/Intelligent_toy/archive/v1.2.zi ...
- 小程序根据input输入,动态设置按钮的样式
[需求]实现当手机号已填写和协议已勾选时,“立即登录”按钮变亮,按钮可点击:若有一个不满足,按钮置灰,不可点击:实现获取短信验证码,倒计时提示操作:对不满足要求内容进行toast弹窗提示. <v ...
- web开发如何使用高德地图API(二)结合输入提示和POI搜索插件
说两句: 以下内容除了我自己写的部分,其他部分在高德开放平台都有(可点击外链访问). 我所整理的内容以实际项目为基础希望更有针对性的,更精简. 点击直奔主题. 准备工作: 首先,注册开发者账号,成为高 ...
随机推荐
- shell编程基础(六): 透彻解析查找命令find
find 由于find具有强大的功能,所以它的选项也很多,其中大部分选项都值得我们花时间来了解一下.即使系统中含有网络文件系统( NFS),find命令在该文件系统中同样有效,只要你具有相应的权限. ...
- 【转载】 C#往文件中追加文本内容信息
在C#的文件相关操作中,往已有的文件中追加相关内容信息也是常有的操作,例如我们在写网站日志文件的时候,很多时候是1天的日志存放在一个txt文件中,此时就涉及到往原有文件中追加写入文本内容信息,追加文本 ...
- 微服务创建——Ubuntu搭建GitLab
Ubuntu呢,用的国产麒麟,可能对于用习惯了Windows操作系统的人来说使用UKylin会很难受吧,开发的人倒没什么,不过就是命令行的问题 那么,怎么搭建一个完整的GitLab呢,一步步来操作吧, ...
- js 简单日历
源地址:https://jingyan.baidu.com/article/546ae185fa4f721149f28cbf.htm 文件:index.htm <!DOCTYPE html> ...
- gulp es6 转 es5
npm install --save-dev gulp-babel babel-preset-es2015 var babel = require("gulp-babel"); / ...
- angular 获取ng-repeat完成状态 $last
$index $first $middle $last $odd $even html <ul> <li ng-repeat="item in data" rep ...
- canvas-9NonZeroAroundPrinciples2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 基于Aspectj 注解实现 spring AOP
AOP 面向切面编程,是 OOP (面向对象编程)的补充 术语 横切关注点:方法中非主要业务逻辑部分 比如运算的模块:有验证参数.执行方法前的操作.执行方法.执行方法后的操作,验证参数.执行方法前后的 ...
- Jmeter自带录制功能
版本更新迭代较快的情况下,通过自动化进行冒烟测试以判断版本准入,在无接口文档的情况下,如果进行自动化?Jmeter有一个自带的录制功能,可以通过录制,获取各个接口设计情况,下面介绍如何进行使用 1.打 ...
- GIT基本命令介绍
1.git remote git remote -v| --verbose 查看仓库详细信息 git remote add <name> <url> 关联远程库.如果你本地新建 ...