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. 【JavaScript】__proto__和prototype的区别和联系【整理】

    var person={name:'ninja'}; person.prototype.sayName=function(){ return this.name; } Chrome运行结果: 提示找不 ...

  2. python 类中的某个函数作为装饰器

    在python的类中,制作一个装饰器的函数, class A: def wrapper(func): ###装饰器 def wrapped(self,*arg,**kwargs) ... return ...

  3. Smarty <= 3.1.32 Remote Code execution(CVE-2017-1000480)

    Smarty介绍   smarty是一个php模板引擎,其项目地址:https://github.com/smarty-php/smarty 测试环境搭建   下载:https://github.co ...

  4. .NET(C#):使用反射来获取枚举的名称、值和特性

    首先需要从内部了解一下枚举(Enumeration),相信许多人已经知道了,当我们声明一个这样的枚举类型: enum MyEnum { AAA, BBB, CCC } 背后的IL是这样的: .clas ...

  5. (转)Python 字符串格式化 str.format 简介

    原文:https://www.cnblogs.com/wilber2013/p/4641616.html http://blog.konghy.cn/2016/11/25/python-str-for ...

  6. Linux网络编程服务器模型选择之并发服务器(下)

    前面两篇文章(参见)分别介绍了循环服务器和简单的并发服务器网络模型,我们已经知道循环服务器模型效率较低,同一时刻只能为一个客户端提供服务,而且对于TCP模型来说,还存在单客户端长久独占与服务器的连接, ...

  7. SpringSecurity自定义用户登录

    根据上一节的配置,默认在服务开启的时候会被要求自动的进行表单登陆.用到的用户名只能是一个固定的用户名user,它的密码是每次启动的时候服务器自动生成的.最常见的场景是我们的用户是从数据库中获取的. 1 ...

  8. ClouderManager集群在Linux里浏览器默认是英文,在Win里浏览器是中文,怎么更改?(图文详解)

    不多说,直接上干货! 问题详情 在这里面如何英文改中文的吗? 莫非要把linux的语言环境给改了?? 我找找网页的语言字体怎么更改下 找到对应页面,修改成中文 解决办法 刷新下,即可 欢迎大家,加入我 ...

  9. STIL文件(DFT/IC测试方向)

    相信很多工程师,特别是刚入行或准备入行的兄弟们或多或少听过测试相关的东西.如果你想做DFT工程师的,测试工程师的,而对于设计/验证工程师们如果能了解下STIL文件的原理,在和DFT/测试工程师聊技术聊 ...

  10. Rest客户端

    public class RestClient { public string EndPoint { get; set; } //请求的url地址 public HttpVerb Method { g ...