HTMLElement.contentEditable学习汇总

245 阅读1分钟

起因

偶然间在掘金看到网友的分享

image.png

了解

像是发现了新大陆,我便去了解了下这个神奇的属性:

developer.mozilla.org/zh-CN/docs/…

难以想象!我发现居然所有的浏览器都支持,本来我以为这样的属性应该是有很大的兼容性问题的。 后来我就发现果然有问题:

zhuanlan.zhihu.com/p/123341288

wuxinhua.com/2018/07/05/…

各大厂商对里面的实现还是有很大差异的。不过简单的自定义textarea组件用这个我觉得完全没有问题!

感受

虽然目前没有碰到类似场景,但是为了不白费我这么多查资料的时间,为了防止以后用到的时候忘记,还是来记录下。

插一句

除了这个用途外,我发现HTMLElement.contentEditable还可以用在某些不允许复制的dom上。例如:csdn的代码块: 只需要打开console控制台,输入document.body.contentEditAble = true;就会发现:原本不可复制的代码块可以复制了,哈哈。