获取光标位置及动态设置光标到指定位置

问题场景:页面有一个字段框(可以理解为一个div中有很多label),一个input框,进入页面,input框自动获取焦点,点击每一个label会把label的内容进行处理,比如加个括号()表示是个函数,自动添加到input框中光标所在位置,并设置光标位置在左括号和右括号之间。

获取input框当前光标所在位置

function getCursurPosition(element) {
    let cursurPosition = 0;
    if (document.selection) {//IE
        var selectRange = document.selection.createRange();
        selectRange.moveStart('character', -element.value.length);
        cursurPosition = selectRange.text.length;
    } else if (element.selectionStart || element.selectionStart == '0') {
       cursurPosition = element.selectionStart;
    }
    return cursurPosition;
}

设置input框光标到指定位置

function setCursurPosition(element, position) {  
     if(element.setSelectionRange){
          element.focus();
          setTimeout(function(){
            element.setSelectionRange(position,position);
          },10);
     }
     else if (element.createTextRange) {
          var range = element.createTextRange();
          range.collapse(true);
          range.moveEnd('character', position);
          range.moveStart('character', position);
          range.select();
     } 
}

你可能感兴趣的:(前端,javascript,vue.js)