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

相关推荐
小皮虾2 小时前
护航隐私!小程序纯前端“证件加水印”:OffscreenCanvas 全屏平铺实战
前端·javascript·微信小程序
白宇横流学长3 小时前
基于SpringBoot医院复查开药网站和微信小程序的设计
spring boot·后端·微信小程序
项目題供诗5 小时前
微信小程序黑马优购(项目)(七)
微信小程序·小程序
qq_12498707537 小时前
基于微信小程序的家电维修平台的设计与实现(源码+论文+部署+安装)
微信小程序·小程序·毕业设计
用户6600676685399 小时前
微信小程序实战:手把手搭建路虎汽车展示小程序
微信小程序
Gracemark1 天前
H5回调页开发与调试复盘
微信小程序
yogalin19931 天前
微信小程序代码复用技巧
性能优化·微信小程序
求学中--1 天前
进阶实战:构建一个完整的微信小程序博客系统(含云开发与状态管理)
微信小程序·小程序
计算机毕设指导61 天前
基于微信小程序的宠物走失信息管理系统【源码文末联系】
java·spring boot·mysql·微信小程序·小程序·tomcat·宠物