老版本iphone设备在uni-app中div contenteditable属性设置true无法输入

老版本iphone设备在uni-app中div contenteditable属性设置true无法输入

开发环境 版本号 项目创建方式
Windows win11 HBuilderX 
产品分类：uniapp/H5

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：win11

HBuilderX类型：正式

HBuilderX版本号：4.53

浏览器平台：Safari

浏览器版本：iphone7及以下

项目创建方式：HBuilderX

### 示例代码：
```html
<div class="inputbox"  contenteditable="true" placeholder="请输入@人员" >
1
</div>

操作步骤：

创建实例项目 输入代码，打包，在iphone7 及以下手机进行测试，无法输入

预期结果：

可以输入

实际结果：

无法输入

bug描述：

contenteditable 属性设置为true的情况下，iphone 7P及以下机型，点击div，能拉取键盘无法获得焦点，输入不进去内容，实测，在普通的html文件中写div加这个属性，相同的手机是正常的，可以输入


更多关于老版本iphone设备在uni-app中div contenteditable属性设置true无法输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

把div改大写 试一下


更多关于老版本iphone设备在uni-app中div contenteditable属性设置true无法输入的实战教程也可以访问 https://www.itying.com/category-93-b0.html


发现问题了，uniapp有默认样式影响了，要给自己的div的这两个属性设置为 text 不要none body, html { / -webkit-user-select: none; / / user-select: none; / }

发现问题了，uniapp有默认样式影响了，要给自己的div的这两个属性设置为 text 不要none body, html { / -webkit-user-select: none; / / user-select: none; / }

针对老版本iPhone设备在uni-app中contenteditable属性失效的问题，以下是分析及解决方案：

问题原因：

  1. uni-app在旧版iOS设备上可能存在WebView兼容性问题
  2. 老版本Safari对contenteditable的支持存在差异
  3. uni-app的DOM处理方式与原生HTML不同

解决方案：

  1. 使用input或textarea替代（推荐）：
<input class="inputbox" placeholder="请输入@人员" />
  1. 如必须使用contenteditable，尝试添加以下CSS：
.inputbox {
    -webkit-user-select: text;
    user-select: text;
    min-height: 1em; /* 确保有可点击区域 */
}
  1. 添加focus事件处理：
focusHandler(e) {
    e.currentTarget.focus();
}
  1. 检查manifest.json配置，确保使用了较新的WebView引擎：
"ios": {
    "webView": "WKWebView"
}
回到顶部