微信小程序输入框光标从中间删除跳到最后bug解决

小程序项目是用uniapp搭建的,发现一个bug,当textarea输入框内含有大量文字,从中间删除快的时候,光标会从中间跳到最后位置。

对应的代码

<textarea

class="text_7"

placeholder="请输入文案"

v-model="form_text"

:maxlength="wordCount"

rows="12"/>

这里原先用了 v-model,双向绑定会造成数据发生更新时导致光标跑到最后

所以这里要取消掉双向绑定的做法

把v-model改成:value,单向数据显示,然后监听onInput修改form_text的值

这里多设置一个变量,用作回显

data() {

return {

form_text_value: '',

form_text: ''

}

}

onInput事件只修改form_text的值

onInput(e) {

this.form_text = e.detail.value;

},

在数据需要提交或者清空的时候,再同步form_text_value的值

syncText(){

this.form_text_value = this.form_text

},

clearText(){

this.form_text=''

this.syncText()

},

最终代码如下:

<textarea

class="text_7"

placeholder="请输入文案"

:value="form_text_value"

:maxlength="wordCount"

rows="12"

@input="onInput"/>

相关推荐
拙慕JULY1 小时前
微信小程序自定义标题背景色
微信小程序·小程序
克里斯蒂亚诺更新1 天前
微信小程序使用vant4 weapp自定义菜单 但是弹出层却被菜单遮挡的解决办法
微信小程序·小程序·notepad++
静Yu1 天前
从一个九宫格素材小程序,看轻量工具产品该如何优化体验
前端·微信小程序
小羊Yveesss1 天前
2026年微信小程序制作工具怎么选?
微信小程序·小程序
脱脱克克1 天前
使用 TRAE / VS Code + DeepSeek V4 开发微信小程序、网页
微信小程序·ai编程·环境配置
前端 贾公子1 天前
使用 wxappUnpacker 工具进行 MAC 微信小程序反编译
macos·微信小程序·小程序
爱分享的小诺2 天前
微信小程序2.0人脸审核,1.0升级到2.0
微信小程序·小程序
打瞌睡的朱尤2 天前
微信小程序(黑马)4-5
微信小程序·小程序
凌奕3 天前
微信小程序接入微信 AI:让用户"说一句话"就能下单
微信·微信小程序·agent
倒流时光三十年3 天前
第十八章 搜索历史保存功能实现记录
spring boot·微信小程序