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

相关推荐
AI砖家1 天前
AI编程—微信小程序开发规范
微信小程序·小程序·notepad++·ai编程
sam-zy2 天前
微信小程序+ESP8266+Arduino 开发智能插座,有本地OTA功能
微信小程序·小程序
A24207349302 天前
微信小程序开发:常用基础语法与指令详解
微信小程序·小程序·notepad++
梦想的颜色3 天前
UniApp 请求层终极封装:统一拦截、错误处理、多端兼容,结合 Claude Code 高效落地
服务器·uniapp·uni.request·codex·claudecode·ai 辅助开发·uniapp 请求封装
laboratory agent开发3 天前
2026小程序系统多维度技术与落地能力深度解析
微信小程序
laboratory agent开发5 天前
多维度拆解小程序平台:数字化经营工具的理性选择指南
微信小程序
T01156185 天前
独立开发者商单实战|商超门店小程序(自提 + 同城配送):小程序全端页面 & 业务流程总图汇总
微信小程序·小程序·个人开发·前端实战
驳是6 天前
入坑 UniApp 写小程序,一些感受
微信小程序
不如摸鱼去7 天前
Wot UI 2.3.0 发布:二维码组件来了,Open Wot 与 wot-starter 同步更新
前端·ui·微信小程序·前端框架·uni-app
万亿少女的梦1687 天前
基于微信小程序、Express与MongoDB的校园失物招领系统设计
mongodb·微信小程序·node.js·express·系统设计