uni-app 微信小程序textarea在ios光标位置不在最后，动态设置cursor无效

uni-app 微信小程序textarea在ios光标位置不在最后，动态设置cursor无效

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 4.45
第三方开发者工具版本号 1.06.2405020
基础库版本号 8.0.57
项目创建方式 HBuilderX

操作步骤：

环境：调试基础库3.7.10，微信版本8.0.57，Hbuilder X版本4.45，先给textarea 赋值后，再延迟给cursor赋值也不好使

预期结果：

textarea光标在ios上默认不在文字最后

实际结果：

textarea光标在ios上默认在文字最前面了

bug描述：

<textarea placeholder="选填，请输入" class="input" auto-height disable-default-padding     
:cursor-spacing="30" [@input](/user/input)="onOtherRemarkInput" :maxlength="200"    
placeholder-class="placeholder-style" v-model="form.otherRemark" :cursor="200"></textarea>

更多关于uni-app 微信小程序textarea在ios光标位置不在最后，动态设置cursor无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

使用下面代码，运行到 HBuilderX alpha 最新版+vue3+安卓真机微信小程序表现正常
<template>
<view style="padding: 10px;">
<input focus style="border: 1px solid red;" v-model="str" :cursor="cursor" />
</view>
</template>

<script> export default { data() { return { str: '123', cursor: 3 } }, onLoad() { setTimeout(() => { this.str = '中文输入法' this.cursor = 2 }, 2000) setTimeout(() => { this.cursor = 3 }, 4000) setTimeout(() => { this.cursor = 4 }, 6000) } } </script>

更多关于uni-app 微信小程序textarea在ios光标位置不在最后，动态设置cursor无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我用的<textarea>标签，只在ios上有问题

<template> <view style="padding: 10px;"> <textarea focus style="border: 1px solid red;" v-model="str" :cursor="cursor" /> </view> </template> <script> export default { data() { return { str: '123', cursor: 3 } }, onLoad() { setTimeout(() => { this.str = '中文输入法' this.cursor = 2 }, 2000)

} </script>换成textarea标签就不好使了，先输入几个字，然后再让键盘收起，点击文本域让输入框再次弹起，这时候光标位置就不对了

回复 t***@163.com: 原生写法，input 正常，textarea 如果只在 ios 不正常的话，去微信社区反馈吧，看起来不是 uniapp 编译的问题。

这是一个在uni-app开发微信小程序时遇到的iOS平台特有的textarea光标定位问题。根据你提供的代码和描述，以下是关键点分析：

  1. 问题现象：在iOS设备上，textarea的光标默认出现在文本开头而非末尾，即使设置了cursor属性也无法修正。

  2. 可能原因：

  • iOS系统对textarea组件的实现与Android存在差异
  • 微信小程序基础库在iOS平台的渲染机制问题
  • v-model双向绑定可能影响了光标的默认行为
  1. 临时解决方案（可尝试）：
// 在mounted或数据更新后手动设置光标
setTimeout(() => {
  this.$refs.textarea.selectionEnd = this.form.otherRemark.length
}, 300)
回到顶部