input输入框控制光标位置 setSelectionRange()的使用

当我们点击编辑时，按照习惯，光标应该在字符串的结尾，在不对光标进行任何设置的情况下，光标是出现在开头的，所以要进行相关操作。

setSelectionRange(selectionStart, selectionEnd)

该方法是对光标进行操作的， selectionStart, selectionEnd 为控制光标位置的参数，我们用例子来了解：

 selectionStart = 0     ,   selectionEnd = 0

 

 selectionStart = 3     ,   selectionEnd = 3

 

 selectionStart = 3     ,   selectionEnd = 7

 

 selectionStart = 0     ,   selectionEnd = 11 

        要明白， selectionStart<=selectionEnd ,两个值相等时，就是一个光标，后者大于前者时，就是选中部分内容，当我们偏要把selectionStart的值设的大于selectionEnd时，运行时会自动将selectionStart的值赋值给selectionEnd，使之相等。

案例1

<template>
    <div>
      <!-- autofocus="autofocus"  加入该属性会自动获取焦点-->
      <input  id="edit" type="text" value='零一二三四五六七八九十' >
      <button @click="getSelect(1,5)">选择指定区域</button>
    </div>
</template>
<script>
  export default {
    data() {
      return {};
    },
    methods: {
      getSelect(res1,res2){
        const editValue = document.getElementById("edit");
          editValue.focus();  //控制光标，首先要获取到焦点
          edit.setSelectionRange(res1,res2);
          console.log(edit.selectionStart);
          console.log(edit.selectionEnd);
      },
    }
  }
</script>
<style scoped>
    div{
      height: 40px;
      width:260px;
    }
    input{
      margin:10px 10px 10px 10px ;
    }
</style>

 结果：

 点击 选择指定区域时，会自动选择 “一二三四”  ，selectionStart = 1 , selectionEnd = 5 

---

        当然 也可以直接修改  selectionStart, selectionEnd 的值，不用setSelectionRange()方法。

      getSelect(res1,res2){
        const editValue = document.getElementById("edit");
          editValue.focus();  //控制光标，首先要获取到焦点
          edit.selectionStart = res1
          edit.selectionEnd = res2
          // edit.setSelectionRange(res1,res2);
          console.log(edit.selectionStart);
          console.log(edit.selectionEnd);
      },
    }

效果和原来是一样的。

案例2

先看效果：

 代码：

 

<template>
    <div>
      <!-- autofocus="autofocus"  加入该属性会自动获取焦点-->
      <input ref="inputTitle" id="edit" type="text" value='零一二三四五六七八九十' >
      <button @click="getedit(-1)">光标前移</button>
      <button @click="getedit(1)">光标后移</button>
      <button @click="selectAll()">{{isSelectAll}}</button>
    </div>
</template>
<script>
  export default {
    data() {
      return {
        isSelectAll:'全选文本'
      };
    },
    methods: {
      getedit(res){
        const editTask = document.getElementById("edit");
          editTask.focus();
          edit.setSelectionRange(edit.selectionStart+res, edit.selectionEnd+res);
      },
      //全选内容
      selectAll(){
          const editTask = document.getElementById("edit");
          editTask.focus();
        if(this.isSelectAll == '全选文本'){
          editTask.selectionStart = 0
          // this.$refs.inputTitle.value.length 为input框中文本长度
           editTask.selectionEnd = this.$refs.inputTitle.value.length
           this.isSelectAll = '取消全选'
        }else{
          editTask.selectionStart = 0
           editTask.selectionEnd = 0
           this.isSelectAll = '全选文本'
        }
      }
    }
  }
</script>
<style scoped>
    div{
      height: 40px;
      width:260px;
    }
    input{
      margin:10px 10px 10px 10px ;
    }
</style>