如何解决IOS中富文本框获取不到焦点问题

最新推荐文章于 2022-06-02 11:04:35 发布

专注前端研究二十年

最新推荐文章于 2022-06-02 11:04:35 发布

阅读量1.1k

点赞数 18

CC 4.0 BY-SA版权

分类专栏： react.js 文章标签： react react-quill ios H5

本文链接：https://blog.youkuaiyun.com/AI_huihui/article/details/124296833

react.js 专栏收录该内容

5 篇文章

订阅专栏

博客讨论了在iOS设备上使用React-Quill组件时遇到的焦点获取和输入问题。问题源于默认样式的`-webkit-user-select:none;`，导致无法选中和输入。通过添加特定样式覆盖，如`-webkit-touch-callout:text!important; -webkit-user-select:text!important;`等，可以解决无法选中和输入的问题。然而，新的问题是需要双击才能获取焦点。为了解决这个问题，建议在富文本组件外添加一个包裹元素，并绑定点击事件来聚焦富文本框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bug出现：

H5使用 react-quill 组件在ios系统中富文本框无法获取到焦点切出现输入框无法打字

出现此问题的原因在于默认样式：

生成了默认样式： -webkit-user-select:none;（无法选中，导致出现问题）

解决方案：


 /*** 富文本框样式 ***/
 .quill-editor{
  -webkit-touch-callout: text !important;
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

此时可以获取焦点了