HTML contenteditable 属性
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 属性的更多相关文章
- contenteditable 属性
定义和用法 contenteditable 属性规定是否可编辑元素的内容. 语法 <element contenteditable="value"> 属性值 值 描述 ...
- HTML5它contenteditable属性
HTML5它contenteditable属性 1.功能说明 (1)功能:同意用户编辑元素中的内容 (2)说明:是一个布尔值.false是不能编辑,true为可编辑 2.分析实例 (1)content ...
- HTML5之contenteditable属性
HTML5之contenteditable属性 1.功能说明 (1)功能:允许用户编辑元素中的内容 (2)说明:是一个布尔值,false是不能编辑,true为可编辑 2.分析实例 (1)content ...
- 关于contenteditable属性
今天刷刷看看,看到了发说说框,发现居然不是textarea的,百思不得其解围.后来看到contenteditable,心想应该就是这个搞怪的吧,百度了下.w3c的解释是contenteditable属 ...
- html -- contenteditable 属性:指定元素内容是否可编辑
所有主流浏览器都支持 contenteditable 属性 定义和用法 contenteditable 属性指定元素内容是否可编辑. 注意: 当元素中没有设置 contenteditable 属性时, ...
- 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试
记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...
- html5新特性contenteditable 属性更容易实现动态表单
介绍html5新特性的一个属性:contenteditable 作用域全局.所有的块标签都可以,例如:span.p.div.td等标签.但是,不可以作用域<br/>类型的标签. conte ...
- contenteditable属性让div也可以当做输入框
你知道div也可以当做输入框么? H5的全局属性contenteditable,带有contenteditable属性的div而不是input或者textarea来作为输入框(div可以根据内容自动调 ...
- html元素contenteditable属性如何定位光标和设置光标
最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学. 废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整 ...
随机推荐
- 博客主题皮肤探索-主题的本地化和ChromeCacheView使用
还有前言 用了大佬的主题之后,有些资源是无法在暴露的接口处更改的,需要自己去css更改.但后台给的都是压缩过的,找起来比较困难,所以特意记录了这篇. 本地资源替换 侧边栏: .introduce-bo ...
- Q64 最小路径和
给定一个包含非负整数的 m x n 网格,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小. 说明:每次只能向下或者向右移动一步. 示例: 输入: [ [1,3,1], [1,5,1], ...
- win10 下springcloud打包docker镜像部署。
1:建一个最简单的springcloud应用. 2:在根目录下新建dockerfile,文件如下: FROM openjdk:8-jdk-alpine VOLUME /tmp ARG JAR_FILE ...
- eclipse常用快捷键实践积累
1. [Ctrl + D]:删除一整行 2. 给函数添加注释 [选中函数名]-[Alt + Shift + J].如果需要自定义注释内容可通过[项目]-[属性]-[Java代码样式]-[代码模板]-[ ...
- ActiveMQ:Exception occurred while processing this request, check the log for more information!
出现上面错误的原因有以下两种 1 jdk的版本和activemq的版本不符 安装完ActiveMQ之后,通过http://IP:8161登陆到控制台. 通过测试代码给服务端发送队列消息,在控制台点击q ...
- solr7之solrJ的使用
solr7的官网API介绍 网页翻译的不是很准确,只能了解个大概,基本能获取如下信息: 一.构建和运行SolrJ应用程序 对于用Maven构建的项目, pom.xml配置: <dependenc ...
- orcale 之 PL/SQL的游标
根据我们之前了解到的情况,SQL是面向集合的,我们的查询结果一般包含多条数据,而在PL/SQL 中的变量一般只能存放一条数据,因此变量是无法满足我们的需求的.这时候我们就需要引入游标来为我们解决问题了 ...
- C 扩展库 - mysql API CRUD
CRUD table create table if not exists `student` ( `id` int auto_increment, `name` varchar(16) not nu ...
- IDEA tomcat部署
一.前言 1.CATALINA_HOME和CATALINA_BASE两个变量的区别:前者是tomcat的安装目录,后者是tomcat实例的目录.(安装一个tomcat,可以启动多个tomcat ...
- 【angular5项目积累总结】消息订阅服务
code import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable ...