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 属性的更多相关文章

  1. contenteditable 属性

    定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值 值 描述 ...

  2. HTML5它contenteditable属性

    HTML5它contenteditable属性 1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)content ...

  3. HTML5之contenteditable属性

    HTML5之contenteditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)content ...

  4. 关于contenteditable属性

    今天刷刷看看,看到了发说说框,发现居然不是textarea的,百思不得其解围.后来看到contenteditable,心想应该就是这个搞怪的吧,百度了下.w3c的解释是contenteditable属 ...

  5. html -- contenteditable 属性:指定元素内容是否可编辑

    所有主流浏览器都支持 contenteditable 属性 定义和用法 contenteditable 属性指定元素内容是否可编辑. 注意: 当元素中没有设置 contenteditable 属性时, ...

  6. 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试

    记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...

  7. html5新特性contenteditable 属性更容易实现动态表单

    介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...

  8. contenteditable属性让div也可以当做输入框

    你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...

  9. html元素contenteditable属性如何定位光标和设置光标

    最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...

随机推荐

  1. 一段话理解 MDX中的Select 、轴、COLUMNS、ROWS

    理解 SELECT  Understanding the SELECT statement SELECT 语句的目的是定义新的 Cube 空间,新的Cube 空间是由类似于 COLUMNS或者ROWS ...

  2. Python flask Reason: image not found libmysqlclient.21.dylib

    Python flask Reason: image not found libmysqlclient.21.dylib 折腾了半个下午,在这里找到了答案,在此记录一下,以免后人躺坑 错误提示: Im ...

  3. Android Studio 学习笔记1.1 创建自己的第一个安卓项目并且打包APK

      自从上一次安装完安卓开发工具Android Studio后抽时间看视屏尝试编写自己的第一个安卓项目约两周的时间 每天下班后会花上1~2小时的时间去学习 目前的成果如下:次元宅的我.apk 嘛 总而 ...

  4. 用Jquery获取Url的参数

    在网上找的一个办法 //先写一个方法 function GetUrlString(name) { var reg = new RegExp("(^|&)"+ name +& ...

  5. C#静态和实例

    静态 实例 关键字static修饰类或方法 不能使用static修饰类或方法 修饰后类直接调用 需要先实例化对象,用对象调用 静态只会执行调用一次,并且在程序退出之前会一直保持状态,占领内存 实例化一 ...

  6. testng多线程

    1.设置多线程,同一浏览器运行两个用例,但是有其中有一个运行较慢

  7. 【HADR】How to reestablish HADR from scratch after a failure on Standby

    转载 http://www-01.ibm.com/support/docview.wss?uid=swg21514783 Cause  Have a HADR pair with Primary on ...

  8. 《Algorithm算法》笔记:元素排序(2)——希尔排序

    <Algorithm算法>笔记:元素排序(2)——希尔排序 Algorithm算法笔记元素排序2希尔排序 希尔排序思想 为什么是插入排序 h的确定方法 希尔排序的特点 代码 有关排序的介绍 ...

  9. 微服务Kong(三)——添加一个API

    在开始前,请确保您已经安装了KONG服务,并且已经启动了KONG服务. 在本节中,您可以学习到:如何在KONG层添加一个API.这是您使用KONG来管理您的API的第一步.对于此篇教程,我们将使用 h ...

  10. PHP之string之ord()函数使用

    ord (PHP 4, PHP 5, PHP 7) ord - Return ASCII value of character ord - 返回字符的 ASCII 码值 Description int ...