div设置了contentEditable属性。android上正常；ios上虽然键盘弹出来了，但是不能输入并且没有光标

Posted 2023-04-15

参考技术A 加入style="-webkit-user-select: auto"就能出现光标和编辑了

contenteditable属性

参考技术A

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

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

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

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

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

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

user-modify.

支持属性值如下：

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

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

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

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