1. 程式人生 > 其它 >vue 如何獲取input中游標位置,並且點選按鈕在當前游標後追加內容

vue 如何獲取input中游標位置,並且點選按鈕在當前游標後追加內容

第一步:監聽輸入框的滑鼠失焦事件@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() }