鍍金池/ 問答/HTML/ 關(guān)于設(shè)置textarea光標位置?

關(guān)于設(shè)置textarea光標位置?

1.需求如下

有一個textarea標簽。需要獲得光標的位置,并且根據(jù)光標的位置插入指定的內(nèi)容。

通過v-model雙向綁定textarea的value值,textarea綁定input事件,當在textarea輸入時,能觸發(fā)input事件,但是通過代碼代表value值,無法觸發(fā)input事件,所以我將value值加入watch里面監(jiān)聽,這樣只要value值改變,就能觸發(fā)watch里面的方法。

2.問題

如上圖,光標位置處在最后面,并沒有改變光標位置

代碼如下:

watch:{
    value:function(val, oldval){
        this.$refs.input.focus();
        this.html = Marked(this.value);
        console.log(this.$refs.input.selectionStart);  // 第一次console
        this.$refs.input.focus();
        // this.start是記錄的貫標的位置,同理this.end
        this.$refs.input.selectionStart = this.start + 2;        
        this.$refs.input.selectionEnd = this.end + 2;
        console.log(this.$refs.input.selectionStart); // 比第一次console 多 2
    }
},

實際是改變了this.$refs.input.selectionStart的值得,但是光標位置視覺上是沒有改變的,這是為什么?
另外,在純html文件中試驗了一下設(shè)置光標位置,是為問題的,是Vue的問題?還是我的代碼邏輯問題?

回答
編輯回答
心夠野

你可以試試把設(shè)置光標的函數(shù)放到 this.$nextTick() 中執(zhí)行,或者設(shè)置一個 settimeout

2018年6月18日 09:27