博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
dom属性 contenteditable=”true” 容器里的一些表现特性心得
阅读量:5101 次
发布时间:2019-06-13

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

发现blog都快长毛了~ ,最近几个月文章产出少,都在折腾杂碎。

不过还是有点心得 想记录下来。 比如:编辑器模式 contenteditable=”true”
因为组件主要,接触了个把月的 编辑器模式,接触到了很多跟编辑器模式 相关的特性。

稍微整理一下甩出来 晒晒,说错了别抽我,一知半解,还有一堆问题。 ^__^

1.如何支持成块编辑 inline-block

有一种场景,如添加某 标签词tag 后,如果想删除这个tag,如果不做什么,会发现会一个字一个字删去。

解决办法:
IE下只要给tag 套上 某标签(一般是span class=tag) 然后 将 tag class 定义为inline-block 就能实现整块 删除的效果。不过会有

chrome 下需要给tag 节点添加 contenteditable=”false” 属性来阻止内部可编辑就可以。

firefox 比较蛋疼 发现firefox下inline-block 或者 contenteditable=”false” 都能实现 整块删除,
除了一个标签就是 img标签,不要给img标签添加 src 属性,只添加title属性可以实现上述功能。

另外,在IE下会有下图的可编辑态,

这个真心不知道怎么去掉,谁知道怎么去~~~~掉?

2.空格回车慎重添加,末尾须加空格

IE下,如果空格太多在编辑删除字符的时候,会有抖动现象。就是最好contenteditable=”true” 节点内的东西都挤一块,别为了美观手贱加空格回车神嘛的。

另外,如果最后一个节点是 inline-block 块状的话,最好在后面添加一个空格,使光标能够正确获取。

3.高度自适应

除IE6 残了外,其他浏览器都能通过 回车实现高度增长。

值得注意的是,如果同级有绝对定位,并且是bottom 定位的dom 如:剩余字数。这个时候IE浏览器会有兼容性问题,可以通过其他方式实现,比如:负margin来实现。

4.position:xx 慎用

在IE下会引起 reflow bug 云云~ >.<

今天就到这了,陆续更新..

转载于:https://www.cnblogs.com/shihao/archive/2012/05/05/2484389.html

你可能感兴趣的文章
linux signal 处理
查看>>
(ZT)算法杂货铺——分类算法之朴素贝叶斯分类(Naive Bayesian classification)
查看>>
LLVM每日谈之二十一 一些关于编译器和LLVM/Clang的代码
查看>>
树形Dp
查看>>
TCP网络编程中RST分节总结
查看>>
Xcode快捷键
查看>>
SVM(三)—Kernels(核函数)
查看>>
基于RPC原理的Dubbo
查看>>
【Spark调优】聚合操作数据倾斜解决方案
查看>>
本周个人总结
查看>>
Ubuntu10.10下ftp的安装配置
查看>>
【转】单调队列初步
查看>>
Grep与web漏洞挖掘<转>
查看>>
树链剖分【p3038】[USACO11DEC]牧草种植Grass Planting
查看>>
.Net中的AOP系列之《单元测试切面》
查看>>
SqlServer根据表中ID加序号
查看>>
python之路_kindEditor编辑器及beautifulsoup模块
查看>>
(zz)最大子序列和问题
查看>>
C# Windows Api的一些方法 封装 以及 常用参数
查看>>
Spark RDD概念学习系列之Pair RDD的分区控制
查看>>