H5系列之contenteditable
其实这个属性很简单,既然把它放到一个单独的文章来说,他肯定有一些注意点要讲
兼容性很好,兼容所有主流浏览器。
用法很简单,只需要给你需要的标签填上即可。
<div contenteditable="true">我是一个div</div>
那么会出现一个神奇的效果。(文字可以编辑)
语法也很简单。
contenteditable="true" (可以编辑)
contenteditable="false" (不可以编辑)
如果是嵌套关系的呢?
<div contenteditable="true">
我是一个div1
<div>我是div2,没有contenteditable属性</div>
</div>
你会发现,即使是嵌套关系,里面的标签也没有contenteditable 属性,也是可以编辑的,这又是为啥呢? 其实这个属性有继承关系,只要父级有,那么子级也会继承下来,所以说,子级也是可以编辑的啦。
如果子级不想编辑,给子级添加上contenteditable=“false” 即可
最后说一下,下面这种特殊情况,按理来说,span 的 姓名 和 年龄都是不可以编辑的对吧。
<div contenteditable="true">
<span contenteditable="false">姓名:</span>小明<br>
<span contenteditable="false">年龄:</span>20岁
</div>
看下下面的操作。
然后只要从 上面一行开始编辑,就会发现,即使是 contenteditable=“false” 的两个 span里面的文字,都被删除了。这又是为啥呢,这是因为,被标记了 false的标签,那么他的内部文字是不能被编辑的,但是 外部的编辑,是可以把你整个标签给删除掉的。 所以得避开这种布局。
H5系列之contenteditable的更多相关文章
- H5系列之History(必知必会)
H5系列之History(必知必会) 目录 概念 兼容性 属性 方法 H5方法 概念 理解History Api的使用方式 目的是为了解决哪些问题 作用:ajax获取数据时 ...
- H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长)
无意中看到一篇博客介绍了contenteditable这个属性——不需用JS,只需在div里加上contenteditable="true",即可实现div模拟textrarea( ...
- H5系列之地理位置(必知必会)
H5之地理位置必知必会 [02]概念 规范地址:http://www.w3.org/TR/geolocation-API/ HTML5 Geolocation(地理定位)用于定位用 ...
- H5新属性 contenteditable
contenteditable 属性规定元素内容是否可编辑 <div contenteditable style="width: 100px;height:100px"> ...
- H5全局属性contenteditable,实现可编辑元素
<div contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</div> 效果如下:
- H5系列之video自己编写控制栏
首先来了解一下 video, video呢,是H5 的标签,别人说的 H5播放器,没错 就是他了,利用video标签,可以实现视频播放. 但是啊,你会发现,在不同的浏览器上,播放器的 控制栏,都是不一 ...
- H5系列之canvas
what is canvas?(什么是canvas) 其实他只是H5里面的一个标签而已,那么他作为一个标签,肯定有他的用途,他就像是一幅画布,等待着你来作画.可以说,他只是一个容器而已,需要配合着Ja ...
- H5系列之常用的语义元素
H5添加了几个新标签,带有语义化的标签,像我们的div 和 span 标签,你说他两能干嘛呢, 好像他两什么事都能干.举个例子,你家里的房子,有几个房间,如果不分房间的话,是不是你 今天睡这里,明天睡 ...
- H5系列之drag拖放
H5中, 有个属性,draggable="true", 这个属性呢(默认false),需要加在标签上,加上去该标签就可以拖动了, 看下gif图吧 默认的标签,是不能拖动的,但是有两 ...
随机推荐
- 循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
在我们开发代码的时候,一般都喜欢进行一定程度的重构,以达到简化代码.关注点分离.提高代码可读性等等方面的考虑,本篇随笔介绍在VUE+Element 前端应用开发过程中,实现简化main.js处理代码, ...
- [Luogu P1006]传纸条 (网格DP)
题面 传送门:https://www.luogu.org/problemnew/show/P1006 Solution 挺显然但需要一定理解的网络(应该是那么叫吧)DP 首先有一个显然但重要的结论要发 ...
- 硬核卸载Vue(删除)
第一步 查找vue位置 打开 cmd 输入 where vue 第二步 进入文件 直接cv(复制粘贴) 随便打开个文件 第三步 删除vue 删除前缀vue的所有 进入node_modules 删除@v ...
- Maven魔法堂:安装Oracle JDBC Driver依赖的那些坑
前言 由于Oracle并没有向公开Maven仓库提供任何Oracle JDBC Driver的Jar包,因此我们无法像MySQL.SQLite等那么轻松直接通过Maven加载依赖. 而手动下载Orac ...
- net core webapi多版本控制与swagger(nswag)配置
前言 首先希望webapi 支持多版本,swagger针对不同的版本可进行交互.多版本控制基于Microsoft.AspNetCore.Mvc.Versioning.ApiExplorer 包,swa ...
- 基于synchronized锁的深度解析
1. 问题引入 小伙伴们都接触过线程,也都会使用线程,今天我们要讲的是线程安全相关的内容,在这之前我们先来看一个简单的代码案例. 代码案例: /** * @url: i-code.online * @ ...
- 利用GitHub和Hexo打造免费的个人博客
每个程序猿都需要一个个人博客,目前广泛出现在大家视野里的有CSDN.博客园.简书,但是他们却没有给用户一个专属的站点.一个好记的域名.你需要一个https://xxx.xxx.xxx/格式的网址,一个 ...
- 经典c程序100例 1-10
==1--10 [程序1] 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? 1.程序分析:可填在百位.十位.个位的数字都是1.2.3.4.组成所有的排列后再去 掉不 ...
- bss、弱符号强符号、common块、未初始化的全局变量------程序员的自我修养-链接装载与库
- sklearn.neighbors.NNeighborsClassifier 详细说明
平时会用到sklearn.neighbors.NNeighborsClassifier函数来构建K最邻近分类器,所以这里对NNeighborsClassifier中的参数进行说明,文中参考的是scik ...