vue 如何獲取input中游標位置,並且點選按鈕在當前游標後追加內容
阿新 • • 發佈:2021-12-06
第一步:監聽輸入框的滑鼠失焦事件@blur
<el-input @blur="handleInputBlur"></el-input>
第二步: 獲取失去交點時的游標在輸入內容中的位置,data裡定義一個變數儲存如cursorIndex
handleInputBlur(e) { this.cursorIndex = e.srcElement.selectionStart; }
第三步:在指定游標位置新增內容,data裡定義一個變數儲存如inputData,用來儲存輸入框中的內容
addEmoji (str) { console.log(str)if (this.maxLength - this.inputData.length >= 2) { let s1 = '' let s2 = '' if (this.inputData.length < this.cursorIndex) { this.inputData = this.inputData + str } else { s1 = this.inputData.substring(0, this.cursorIndex) s2= this.inputData.substring(this.cursorIndex, this.inputData.length) this.inputData = s1 + str + s2 } } this.emoji_show = false this.$refs.inputArea.focus() }