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

Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐