微信小程序输入框光标从中间删除跳到最后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"/>

相关推荐
独角鲸网络安全实验室1 小时前
2026微信小程序抓包全解析:从实操落地到合规风控,解锁前端调试新范式
前端·微信小程序·小程序·抓包·系统代理绕过·https证书严格校验·进程隔离
fix一个write十个6 小时前
【uniApp开发】微信小程序 web-view 内嵌 H5 跳转支付踩坑实录
微信小程序·uni-app
蜡台16 小时前
H5入住浙里办App详细步骤
vue·uniapp·h5·浙政钉
棋宣16 小时前
微信小程序onShareAppMessage 分享-生命周期函数 在vue3中 组合式函数 hooks中不生效
微信小程序·小程序
好赞科技1 天前
深度测评2026年精选美发预约小程序排行榜 革新预约新体验 修订
大数据·微信小程序
一颗无敌码农1 天前
多商户与多门店电商系统有什么区别?核心模式解析
微信小程序·php·用户运营·crmeb
hhzz2 天前
记录微信小程序tabbar不显示问题:uni-app Vue 3 自定义 tabBar 不渲染
vue.js·微信小程序·uni-app
Greg_Zhong2 天前
微信小程序中调用豆包【免费】模型,实现小程序版ai助手完整版
微信小程序·豆包模型·调用豆包模型封装ai助手
30762 天前
uni-app在微信小程序国际化分包方案:优雅解决主包体积超限问题
微信小程序
打瞌睡的朱尤3 天前
微信小程序50~75
微信小程序·小程序