微信小程序输入框光标从中间删除跳到最后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 天前
codex 全流程开发上线的高颜值礼簿小程序
前端·微信小程序
爱勇宝6 天前
我想认真做一件小事:让孩子和家长更好地互动
微信小程序·小程序·云开发
唯火锅不可辜负6 天前
避坑指南:iOS 下 scroll-view 嵌套 fixed 布局的“翻车”现场与修复
微信小程序
didiplus6 天前
运维人的随身神器:我把25个常用工具塞进了微信小程序
微信小程序
一份执念7 天前
uni-app 小程序分包限制处理与主包体积优化实战
前端·微信小程序
一份执念7 天前
ECharts 安装与使用完全指南:从全量引入到小程序分包优化
微信小程序·echarts
skiyee8 天前
🔥UniApp 仅需 5 行代码!实现所有页面中控制应用主题变化
前端·微信小程序
Jinkey9 天前
要用户手机号真的是为了打骚扰电话吗?浅谈微信生态会员账号体系与资产合并
后端·微信·微信小程序
用户43242810611411 天前
微信小程序从0到1接入微信支付的完整攻略
微信小程序
spmcor13 天前
微信小程序 setStorageSync 踩坑实录:别让"顺手一存"变成"隐形炸弹"
微信小程序