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. Java Web 热部署

    热部署有多种方案,下面的方案是其中的一种. 暂时还没找到一种令人满意的方案. 1,配置WEB Server 去这里 (https://tomcat.apache.org/download-90.cgi ...

  2. FlowPortal-BPM——文件目录功能

    安装目录文件夹:Attachments 附件bin Bin目录:dll文件的引用DataSourceProviders 固定的数据库连接文件ExtServer 数据源服务FormService 表单服 ...

  3. openproject安装与使用

    思路: 1.生成config配置文件 2.导出配置文件,修改配置文件,删除容器,重新部署容器 3.登录后配置, 4.配置git,可以从openproject里查看gitlab上的代码库 第一次安装: ...

  4. eclipse如何设置UTF-8

    一.Eclipse设置utf-8编码包括两个方面,一方面可以设置workspace工作间编码,另一方面可以设置Android Project项目编码,设置步骤: 1)设置workspace工作间编码: ...

  5. Homebrew下安装的软件自启动服务管理工具:Launchrocket

    帮助管理Homebrew安装的服务的软件,比如使用Homebrew安装的Mysql.Redis.MongoDB,传统方式需要使用命令行的命令,而使用LaunchRocket则可以在图形界面中进行管理. ...

  6. auguements实参对象的数组化

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 【Maven学习】远程仓库的配置

    很多情况下,默认的中央仓库无法满足项目的需求,我们可能需要配置新的远程仓库,此时我们可以这样配置: <repository> <id>java-net</id> & ...

  8. redis有序集合类型sort set

    redis的数据类型之-有序集合 sort set和set类型一样,也是string类型元素的集合,也没有重复的元素,不同的是sort set每个元素都会关联一个权,通过权值可以有序的获取集合中的元素 ...

  9. EasyMock set方法报错: java.lang.AssertionError

    有返回值的方法没问题, 直接andReturn就行了. EasyMock.expect(info.getWebTitle()).andReturn(StringUtils.EMPTY).anyTime ...

  10. js继承的实现(es5)

    js对面向对象的支持很弱,所以在ES6之前实现继承会绕比较多的弯(类似于对面向对象支持弱,然后强行拼凑面向对象的特性) es5中实现继承的几种方式,父类定义为Super function Super( ...