博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
div contenteditable="true"各个浏览器上的解析
阅读量:5857 次
发布时间:2019-06-19

本文共 467 字,大约阅读时间需要 1 分钟。

hot3.png

可编辑状态下的div输入一段文字

150117_N4Fq_3680343.png

谷歌浏览器下的解析

150123_IATA_3680343.png

火狐浏览器下的解析

150129_kXCA_3680343.png

由上图可知,谷歌浏览器下换行用的是div标签,火狐浏览器下换行用的是br标签

当我们输入一段文字之后再删除掉,看看会有什么效果

谷歌浏览器

150939_AAsT_3680343.png

火狐浏览器

150946_Gf1l_3680343.png

 

页面上看上出会与没有输入文字一个效果,但我们会看到dom结构已经发生了变化,所以我们要注意当清空div的内容时要用移除所有子元素的方法(empty()),不要去用移除指定的标签(因为在各个浏览器下解析的不一样),这也是我在做项目中总结出来的

为什么不用$(".div-content").children().remove();而用$(".div-content").empty();

因为在谷歌浏览器的解析中,第一行并没有被标签包裹着,所以使用remove()并不能移除纯文本

还有一个问题就是在火狐浏览器上可编辑的div没有设置高度时是塌陷的,焦点定位也不准确等问题,在谷歌浏览器没有遇到使用的时候注意下

 

转载于:https://my.oschina.net/u/3680343/blog/1604566

你可能感兴趣的文章
安卓绿色联盟最强联名,超百家应用/企业共贺新春
查看>>
【跃迁之路】【730天】程序员高效学习方法论探索系列(实验阶段487-2019.2.20)...
查看>>
The Rise of Worse Is Better 论文-学习笔记
查看>>
使用 Docker 部署 Spring Boot项目
查看>>
【技术性】Search知识
查看>>
leetcode389.Find The Difference
查看>>
linux上ssh免密登录原理及实现
查看>>
gradle-学习笔记(2)-多项目构建
查看>>
HTML表单提交的安全问题
查看>>
被神话的大数据——从大数据(big data)到深度数据(deep data)思维转变
查看>>
强制缓存和协商缓存有什么区别
查看>>
Python爬虫--- 1.4 正则表达式:re库
查看>>
Xcode 10 升级导致项目报错的常见问题
查看>>
我们来说一说TCP神奇的40ms
查看>>
[LeetCode] 97. Interleaving String
查看>>
微服务架构组件分析
查看>>
Mongodb数据的导出与导入
查看>>
在SAP UI中使用纯JavaScript显示产品主数据的3D模型视图
查看>>
python 设计模式-适配器模式
查看>>
vue_music:排行榜rank中top-list.vue中样式的实现:class
查看>>