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的光标对象是如何工作的,后面我会贴完整 ...
随机推荐
- js 的概念和声明-js 的变量-js 的运算符和逻辑结构-js 的数组
js 的概念和声明Js的概念和声明:问题:在网页的发展历程中,发现网页不能对用户的数据进行自动校验,和提供一些特效造成用户体验极差解决:使用JavaScript作用:可以让网页和用户之间进行直接简单的 ...
- 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)
一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...
- FJOI2019 游记[大概是考完会解封?]
Day -1 不知不觉就快省选了啊...从NOIP的爆炸到现在也已经过了两个月了啊... 因为高一没有封闭[划] 所以这些内容是翘了课[划]在机房写的 嘛...感觉自己还有好多东西不会啊……这两天一直 ...
- 洛谷p1208 水题贪心 思想入门
题目描述 由于乳制品产业利润很低,所以降低原材料(牛奶)价格就变得十分重要.帮助Marry乳业找到最优的牛奶采购方案. Marry乳业从一些奶农手中采购牛奶,并且每一位奶农为乳制品加工企业提供的价格是 ...
- Ngin 简单配置文件
#user nobody; worker_processes ; #error_log logs/error.log; #error_log logs/error.log notice; #error ...
- 使用grunt搭建自动化的web前端开发环境
使用grunt搭建自动化的web前端开发环境 我们一定经常听过grunt和gulp,它们都是用于搭建自动化的web前端开发环境的,这里主要介绍grunt的使用,值得一提的是,jQuery.bootst ...
- 安装php readline扩展报错 Please reinstall libedit
现象:configure: error: Please reinstall libedit – I cannot find readline.h解决办法:安装 Editline Library (li ...
- 安装win7 64位和win10 64位双系统小结
1.gpt比mbr更先进.与主启动记录 (MBR) 分区方法相比,GPT 具有更多的优点,因为它允许每个磁盘有多达 128 个分区(mbr只支持4个分区),支持高达 18 千兆兆字节的卷大小,允许将主 ...
- Window.localStorage
博客园 https://www.cnblogs.com/st-leslie/p/5617130.html 参考文档 https://developer.mozilla.org/zh-CN/docs/W ...
- 033-JsonUtils 工具类模板
模板一:使用的是jackson package cn.e3mall.common.utils; import java.util.List; import com.fasterxml.jackson. ...