HTML contenteditable 属性
contenteditable 属性是 HTML5 中的新属性,所有的主流浏览器都支持 contenteditable 属性。
contenteditable 属性规定了元素内容是否可编辑。
* 如果元素未设置contenteditable 属性,那么元素会从其父元素继承该属性。
语法:
<element contenteditable="true|false">
属性值为 true 时规定元素内容可编辑,为 false 时规定元素内容不可被编辑。
实例:
<p contenteditable="true">这是一个可以编辑的文本内容。</p>

另外 select 标签如果加上 contenteditable 属性的话会阻止下拉
<select name="" id="se1" contenteditable="true">
<option value=""></option>
<option value="1">属性值为true的时候阻止下拉</option>
<option value="2">属性值为false的时候不阻止</option>
</select>
contenteditable 是存在浏览器的兼容性问题。在火狐浏览器下,会阻止下拉,谷歌却不会。 2017-02-16 10:24:21
编辑时回车,会在元素里面自动添加 <br />标签;
HTML contenteditable 属性的更多相关文章
- contenteditable 属性
定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值 值 描述 ...
- HTML5它contenteditable属性
HTML5它contenteditable属性 1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)content ...
- HTML5之contenteditable属性
HTML5之contenteditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)content ...
- 关于contenteditable属性
今天刷刷看看,看到了发说说框,发现居然不是textarea的,百思不得其解围.后来看到contenteditable,心想应该就是这个搞怪的吧,百度了下.w3c的解释是contenteditable属 ...
- html -- contenteditable 属性:指定元素内容是否可编辑
所有主流浏览器都支持 contenteditable 属性 定义和用法 contenteditable 属性指定元素内容是否可编辑. 注意: 当元素中没有设置 contenteditable 属性时, ...
- 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试
记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- contenteditable属性让div也可以当做输入框
你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...
- html元素contenteditable属性如何定位光标和设置光标
最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...
随机推荐
- 对drf视图集的理解
视图集ViewSet 使用视图集ViewSet,可以将一系列逻辑相关的动作放到一个类中: list() 提供一组数据 retrieve() 提供单个数据 create() 创建数据 update() ...
- openproject安装与使用
思路: 1.生成config配置文件 2.导出配置文件,修改配置文件,删除容器,重新部署容器 3.登录后配置, 4.配置git,可以从openproject里查看gitlab上的代码库 第一次安装: ...
- [转] Elasticsearch 6.1官方入门教程
一篇比较简要又全面的elasticsearch教程. https://blog.csdn.net/hololens/article/details/78932628
- Zynq-7000 FreeRTOS(二)中断:Timer中断
总结Zynq-7000 这款器件中的Timer定时器中断,为FreeRTOS中断做准备.在 ZYNQ 的纯 PS 里实现私有定时器中断. 每隔一秒中断一次, 在中断函数里计数加 1, 通过串口打印输出 ...
- 20.Class的继承
1.简介 Class 可以通过extends关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多 class Point { } class ColorPoint extends ...
- 2 小时学会 Spring Boot
一. 什么是 Spring Boot Takes an opinionated view of building production-ready Spring applications. Sprin ...
- Idea查看代码相关技巧
(1)查看类中的属性与方法快捷键 Alt+7 (2)查看方法被调用 在方法上右键find usages (3)查看方法说明 Ctrl+Q
- gcc对open(2)支持重载吗
在Linux中,如果man -s2 open, 我们看到两种不同的函数原型声明: $ man -s2 open NAME open, creat - open and possibly create ...
- 转载:怎么用eclipse开发C++程序(以后备用,待实现),使用CDT
一:准备工作:需下载以下三个软件包 a).Eclipse 3.1 官方站点: http://www.eclipse.org 工具下载地址:http://www.eclipse.org/download ...
- JAVA的静态代理与动态代理比较--转载
扩展:http://www.ibm.com/developerworks/cn/java/j-lo-proxy1/JAVA的静态代理与动态代理比较 一.概念 代理模式是常用的Java 设计模式,它的特 ...