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. leetcode-884-两句话中的不常见单词

    题目描述: 给定两个句子 A 和 B . (句子是一串由空格分隔的单词.每个单词仅由小写字母组成.) 如果一个单词在其中一个句子中只出现一次,在另一个句子中却没有出现,那么这个单词就是不常见的. 返回 ...

  2. 使用selenium的WebDriver和ChromeDriver实现UI自动化

    下载chromedriver chromedriver与chrome的对应关系表:http://blog.csdn.net/huilan_same/article/details/51896672 下 ...

  3. [Alpha]Scrum Meeting#10

    github 本次会议项目由PM召开,时间为4月13日晚上10点30分 时长25分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写每日例会报告撰写并整理任务分配博客 撰写每日例会报告配合测试.验收 ...

  4. 2018南京网络赛 - Skr 回文树

    题意:求本质不同的回文串(大整数)的数字和 由回文树的性质可知贡献只在首次进入某个新节点时产生 那么只需由pos和len算出距离把左边右边删掉再算好base重复\(O(n)\)次即可 位移那段写的略微 ...

  5. springcloud(七)-Feign声明式REST调用

    前言 前面我们使用的RestTemplate实现REST API调用,代码大致如下: public User findById(@PathVariable Long id) { return rest ...

  6. [转] Ansible 内置变量参考

    Quick reference for Ansible variables [From] https://github.com/lorin/ansible-quickref

  7. Mac下使用Eclipse的Show in Terminal提示command not found: mvn

    在Mac下一般配置了Maven的环境变了一般都不会提示,但是如果使用zsh的扩展之后,系统默认的环境变量配置文件会发生变化,尤其使用Eclipse打开终端时,默认不会去读取用户目录下的~/.bashr ...

  8. vue中的双向数据绑定详解

    前言 什么是数据双向绑定? vue是一个mvvm框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化.这也算是vue的精髓之处了.值得注意的是,我 ...

  9. java service wrapper将java程序包装成系统服务(一)

    一. 概述 使用java语言开发应用程序,在windows平台下,一般存在3种应用形式: 1. web应用.web应用多数打成war包在web容器(如tomcat,jetty等)中运行. 2. 桌面应 ...

  10. Linux 服务器开发常用命令操作

    1)查看网络端口 netstat -na --ip 2)查看特定应用程序进程 ps -ef | grep vsftp  or ps aux | grep xxx.exe 3)查看系统日志 vi /et ...