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

相关推荐
莫桐6 小时前
微信小程序-ios环境下webview打开的h5页面replace跳转方式不生效问题
ios·微信小程序·小程序
毕设源码-钟学长7 小时前
【开题答辩全过程】以 基于微信小程序的考公论坛的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
帅次8 小时前
系统分析师-移动应用系统分析与设计
android·ios·微信小程序·小程序·android studio·webview
沉默-_-1 天前
微信小程序网络请求 wx.request 详解
网络·学习·微信小程序·小程序
沉默-_-1 天前
微信小程序页面配置详解
学习·微信小程序·apache·微信开发者工具
逆龙泰氽1 天前
微信小程序开发04-1(小程序API)
微信小程序·小程序
苏苏哇哈哈1 天前
微信小程序实现高性能动态配置水滴凹槽、凸起Tabbar 组件
微信小程序·小程序
逆龙泰氽1 天前
微信小程序开发03(WXML语法)
微信小程序·小程序
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序的课程表信息系统的开发实现为例,包含答辩的问题和答案
微信小程序·小程序