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. 【面向对象】【prototype&&__proto__&&实例化对象三者之间的关系】

    1.构造函数 a.什么是构造函数? 解释:通过关键字new 创建的函数叫做构造函数 作用:用来创建一个对象 废话少说直接上代码,首先我们还是创建一个构造函数人类 然后我们在创建两个实例,一个凡尘 一个 ...

  2. java获取某段时间内的月份列表

    /**获取两个时间节点之间的月份列表**/ private static List<String> getMonthBetween(String minDate, String maxDa ...

  3. Flask-mail 发邮件慢(即使异步)

    Flask-mail 发邮件慢(即使异步) 一开始,按照狗书上的代码异步发邮件,但是发现原本响应只需要150ms的页面加了邮件发送就变成了5s响应(这怕不是假异步) 狗书的异步发邮件代码: def s ...

  4. sql server 2008 R2 配置管理工具打不开

    使用 sql server 配置管理工具是报如下错误: 解决方法:   1 找出 sqlmgmproviderxpsp2up.mof 这个文件的位置   2 以管理员身份运行 mofcomp &quo ...

  5. mono for android 第四课--提示框(转)

    其实在VS中开发安卓代码和C#还是有一些相似性,刚开始我也不知道怎么弹出提示框,于是就百度了下,再加上个人的小聪明得到一下结果 builder.setTitle表示提示框的标题. setMessage ...

  6. vSphere虚拟主机安装Centos7系统

    经过上一帖的主机设置,这一步就可以开始安装系统了,本次详细记录各个过程并分析结果. Centos7 1.右键点击列表中的虚拟主机,打开控制台. 点击绿色开机键,开始安装. 这里有一个很关键的点,就是上 ...

  7. AngularJs 指令实现选项卡

    HTML: <body ng-controller="Aaa"> <my-tab my-id="div1" my-data="dat ...

  8. HTTP访问的两种方式:HttpURLConnection和HTTPClient的比较

    http://blog.sina.com.cn/s/blog_87216a0001014sm7.html http://www.2cto.com/kf/201305/208770.html ----- ...

  9. SDSM框架

    标题解释 SDSM指的是SpringMVC+Dubbo+Spring+Mybatis的框架 ------------------------------------------------------ ...

  10. HDFS Java Client对hdfs文件增删查改

      step1:增加依赖 pom.xml           ...      <!-- https://mvnrepository.com/artifact/org.apache.hadoop ...