How does vue get the position of the cursor in input and click the button to append the content after the current cursor

clipboard.png

Mar.22,2022

is to get the cursor position and then intercept the splicing string and fill in input reset the cursor

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;
}

if the input box for the InputNumber, of iview needs to be bidirectionally bound and assigned as if it is successful, add nextTick or setTimeOut, to the cursor positioning, otherwise the cursor positioning will fail.
this.$nextTick (() = > {
elInput.selectionStart = startPos + value.length
elInput.selectionEnd = startPos + value.length
})


refer to this


Brother, can you send me the complete code and see how you write it? I also encountered this problem


this question is interesting


first step: listen for the mouse out of focus event @ blur
< el-input @ blur= "handleInputBlur" > < / el-input >

of the input box.

step 2: get the position of the cursor in the input when the intersection is lost. Define a variable store in data, such as blurIndex
handleInputBlur (e) {

.
this.blurIndex = e.srcElement.selectionStart;

}
step 3: omit.

Menu