uni-app ios18 textarea光标二次聚焦异常

发布于 1周前 作者 caililin 来自 Uni-App

uni-app ios18 textarea光标二次聚焦异常

产品分类

uniapp/小程序/微信

开发环境、版本号和项目创建方式

项⽬目信息 版本/信息
PC开发环境操作系统 Windows
操作系统版本号 window10
第三方开发者工具版本号 3.0.0-alpha-4040320241223001
基础库版本号 3.7.2
项目创建方式 CLI
CLI版本号 3.0.0-alpha-4040320241223001

示例代码

<uni-easyinput type="textarea" autoHeight v-model="value" placeholder="请输入内容"/>
<textarea class="tipt" :maxlength="300" auto-height placeholder="请留下您的宝贵意见,我们将不断优化产品体验!" placeholder-class="ptipt" v-model="note"></textarea>

操作步骤

textarea 输入完值点击完成,有值情况获取焦点。

预期结果

聚焦到值的最后一个字符位置。

实际结果

聚焦到最前面位置。

bug描述

ios18系统 textarea 聚焦有问题
测试:

  • iPhone16, iPhone15, iPhone12mini 系统18.1 异常
  • iPhone12 Pro 系统17.5.1 正常

2 回复

普通的 input 是否正常,是 input 都有问题,还是 uni ui 的问题


针对您提到的uni-app在iOS 18上textarea光标二次聚焦异常的问题,这通常与iOS系统的更新导致的一些兼容性问题有关。为了解决这个问题,我们可以尝试一些常见的修复方法,包括调整textarea的属性、事件监听以及使用原生组件等。以下是一些可能的解决方案,并附上相关代码示例:

1. 调整textarea属性

确保textarea的auto-focus属性没有在不需要的时候被设置,因为这可能影响光标的聚焦行为。同时,可以尝试调整adjust-position属性来优化光标位置。

<textarea
  placeholder="请输入内容"
  :auto-focus="false"
  adjust-position="true"
  @focus="handleFocus"
  @blur="handleBlur"
></textarea>

2. 监听focus和blur事件

通过监听textarea的focusblur事件,我们可以手动控制光标的聚焦行为,尝试在二次聚焦时重置一些状态。

methods: {
  handleFocus(event) {
    // 可以在这里添加一些处理逻辑,比如重置光标位置
    console.log('Textarea focused');
  },
  handleBlur(event) {
    // 可以在这里添加一些处理逻辑,比如保存当前状态
    console.log('Textarea blurred');
  }
}

3. 使用原生组件

在某些情况下,使用uni-app提供的原生组件可能会更稳定,因为这些组件直接基于原生系统的实现。

<web-view src="path/to/your/native/textarea/component.html"></web-view>

注意:这里web-view组件是用来加载外部HTML页面的,如果你有一个原生的textarea组件,你可以通过这种方式集成。但通常,我们需要在原生开发中处理这部分逻辑,并通过某种方式(如JSBridge)与uni-app进行通信。

4. 更新uni-app和依赖库

确保你的uni-app和所有相关依赖库都是最新版本,因为开发者可能已经在新版本中修复了这类问题。

npm update

5. 提交Bug报告

如果上述方法都不能解决问题,建议向uni-app的官方社区或GitHub仓库提交一个Bug报告,附上详细的复现步骤和可能的解决方案。

请注意,由于iOS系统的封闭性和更新频率,某些问题可能需要等待官方修复或采取更复杂的原生开发解决方案。希望这些建议能帮助你解决问题!

回到顶部