小程序项目是用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"/>