contenteditable(contenteditable用于)

更新时间:2023-03-01 02:59:12 阅读：评论：0

contenteditable属性

contenteditable通俗来讲就是一个编辑器。

contenteditable 属性是 HTML5 中的新属性。规定是否可编辑元素的内容。
属性值
true 规定可以编辑元素内容。
fal 规定无法编辑元素内容。
例：

很多人刚开始接触contenteditable这个属性时都会想到textarea。
textarea支持多行文本输入，满足了我们编辑的很大需求。然而，textarea不能像div一样高度自适应，高度保持不变，内容大于高度时就会出现滚动条。而且textarea只支持文本输入，随着现在越来越关注用户体验，需求也越来越多，很多时候我们需要在编辑区域插入图片，链接，视频。
现在我们有一个很简单的实现办法，就是让一个div标签（高度自适应block元素）模拟编辑器。即在div里加入contenteditable="true"属性；
例：

在设置了contenteditable属性的元素中插入图片，链接，商品等；

此处还涉及到一个window.getSelection知识点，在接下来的文章会详细介绍。

让contenteditable元素只能输入纯文本
（1）css控制法
一个div元素，要让其可编辑，contenteditable属性是最常用方法，CSS中也有属性可以让普通元素可读写。

ur-modify.

支持属性值如下：

read-write和read-write-plaintext-only会让元素表现得像个文本域一样，可以focus以及输入内容
（2）contenteditable控制法

"plaintext-only"可以让编辑区域只能键入纯文本

* 注意：目前仅仅是Chrome浏览器支持比较好的

后续会继续更新。
欢迎反馈，感谢阅读！

contenteditable怎么读

英文原文：
content editable
英式音标：
[kənˈtent] editable
美式音标：
[ˈkɑntɛnt] editable

如何让contenteditable的div 在点击其他div的时候不失焦

将DIV对象的contenteditable属性设置为true之后,再插入一个表格,就能编辑了.代码如下: abc function doit(){ var abc=document.getElementById('abc'); abc.contentEditable=true; abc.innerHTML+=' ' }