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

相关推荐
这是个栗子21 小时前
【uni-app微信小程序问题解决】Uni-app 微信小程序组件不渲染
微信小程序·小程序·uni-app
倒流时光三十年1 天前
第四章 WXSS 样式系统与布局
spring boot·微信小程序
爱学习 爱分享2 天前
微信小程序html 在 webview 会打开再缩放一下
微信小程序·小程序·html
xshirleyl2 天前
微信小程序开发week6-慕尚花坊项目
微信小程序·小程序
好赞科技2 天前
2026年八大上门服务预约小程序:解锁高效生活新体验
大数据·微信小程序
编程猪猪侠2 天前
uni-app微信小程序车牌号输入组件实现
微信小程序·uni-app
客场消音器3 天前
如何使用codex进行UI重构,让AI开发的前端页面不再千篇一律
前端·后端·微信小程序
打瞌睡的朱尤3 天前
微信小程序126~160
微信小程序·小程序
腾讯云云开发3 天前
小程序成长计划正式接入Hy3 preview
微信小程序
bruce541103 天前
讲讲 RTMate (WebSocket as A Service)中的消息的发布订阅机制
后端·微信小程序