uni-app textarea在iphone12和xr上键盘响应速度慢，需2秒时长

uni-app textarea在iphone12和xr上键盘响应速度慢，需2秒时长

示例代码：

<textarea  
    v-model="form.coment"  
    maxlength="200"  
    @click="focusState = true"  
    :focus="focusState"  
    placeholder="写下你对商品的评价吧"  
    placeholder-style="color: #9E9E9E;font-size:24rpx"  
></textarea>

操作步骤：

<textarea  
    v-model="form.coment"  
    maxlength="200"  
    @click="focusState = true"  
    focus="focusState"
    placeholder="写下你对商品的评价吧"
    placeholder-style="color: #9E9E9E;font-size:24rpx"
></textarea>

预期结果：

<textarea  
    v-model="form.coment"  
    maxlength="200"  
    @click="focusState = true"  
    focus="focusState"
    placeholder="写下你对商品的评价吧"
    placeholder-style="color: #9E9E9E;font-size:24rpx"
></textarea>

实际结果：

<textarea  
    v-model="form.coment"  
    maxlength="200"  
    @click="focusState = true"  
    focus="focusState"
    placeholder="写下你对商品的评价吧"
    placeholder-style="color: #9E9E9E;font-size:24rpx"
></textarea>

bug描述：

已知机型iphone12，iphonexr，textarea点击掉起弹窗反应很慢，需要2秒钟才能弹起，体验很差。 iphone7测试无此问题

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 10
HBuilderX类型 正式
HBuilderX版本 3.1.13
手机系统 iOS
手机系统版本 IOS 14
手机厂商 苹果
手机机型 iphoneXr,iphone12
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

0e7c8d8b0fd1062e45ef412ed5d117d7.zip


更多关于uni-app textarea在iphone12和xr上键盘响应速度慢，需2秒时长的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

更新

更多关于uni-app textarea在iphone12和xr上键盘响应速度慢，需2秒时长的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你好 更新什么？

更新hbuilder吗？ 大佬

回复 z***@163.com: 对

把输入法切换为搜狗输入法“全键盘英文状态”，你会发现键盘弹起又收回，不只是速度慢的问题

这是一个已知的iOS系统兼容性问题，主要出现在iPhone XR、iPhone 12等较新机型上。问题根源在于iOS系统对WebKit中textarea元素聚焦处理的优化不足，尤其是在复杂页面或滚动视图中。

解决方案：

  1. 使用@touchstart替代@click 将@click事件改为@touchstart可以显著提升响应速度，因为touchstart比click更早触发。

    <textarea  
    v-model="form.coment"  
    maxlength="200"  
    @touchstart="focusState = true"  
    :focus="focusState"
    placeholder="写下你对商品的评价吧"
    placeholder-style="color: #9E9E9E;font-size:24rpx"
></textarea>

  2. 添加cursor-spacing属性 设置cursor-spacing可以让输入框在聚焦时与键盘保持一定间距，有时能改善响应。

    <textarea  
    cursor-spacing="20"
    v-model="form.coment"  
    maxlength="200"  
    @click="focusState = true"  
    :focus="focusState"
    placeholder="写下你对商品的评价吧"
    placeholder-style="color: #9E9E9E;font-size:24rpx"
></textarea>
回到顶部