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

Question

Answer 1

就是获取光标位置 然后截取拼接字符串 重新填入input 重新设置光标

function insertInputTxt(id, insertTxt) {
    var elInput = document.getElementById(id);
    var startPos = elInput.selectionStart;
    var endPos = elInput.selectionEnd;
    if (startPos === undefined || endPos === undefined) return
    var txt = elInput.value;
    var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
    elInput.value = result;
    elInput.focus();
    elInput.selectionStart = startPos + insertTxt.length;
    elInput.selectionEnd = startPos + insertTxt.length;
}

Answer 2

如果输入框为iview的InputNumber，要双向绑定赋值好像才能成功，光标定位要加上nextTick 或者 setTimeOut，不然就会重新光标定位失败。
this.$nextTick(() => {
elInput.selectionStart = startPos + value.length
elInput.selectionEnd = startPos + value.length
})

Answer 3

参考这个将input中的光标移动到文字的末尾后，怎么用js显示光标当前的位置？

Answer 4

老哥能不能发一下完整代码看你怎么写的我也碰到了这个问题

Answer 5

插个眼 这问题有意思

Answer 6

第一步：监听输入框的鼠标失焦事件@blur
<el-input @blur="handleInputBlur"></el-input>

第二步: 获取失去交点时的光标在输入内容中的位置，data里定义一个变量存储如 blurIndex
handleInputBlur(e) {

this.blurIndex = e.srcElement.selectionStart;

}
第三步：省略。。