美文网首页
如何获取input中光标位置,并且点击按钮在当前光标后追加内容

如何获取input中光标位置,并且点击按钮在当前光标后追加内容

作者: 泪滴在琴上 | 来源:发表于2022-08-05 12:10 被阅读0次

    第一步:监听输入框的鼠标失焦事件@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()
    }
    

    相关文章

      网友评论

          本文标题:如何获取input中光标位置,并且点击按钮在当前光标后追加内容

          本文链接:https://www.haomeiwen.com/subject/yfrpwrtx.html