其他分享
首页 > 其他分享> > 如何获取与设置光标在input框的位置

如何获取与设置光标在input框的位置

作者：互联网

目录

获取光标位置

不卖关子，input的dom上存在一个属性selectionStart可以获取光标位置

selectionStart的值为数字，光标在input中第一个字符的左边开始记作0，第一个字符和第二个字符之间为1，依次类推。

其实还有一个selectionEnd结束位置，但是实际使用时用不上。

<body>
  <input id="box" />
  <button onclick="test()">
    获取光标位置
  </button>
</body>
<script>
  function test() {
    const input = document.getElementById('box')
    console.log(input.selectionStart)
  }
</script>

在这里插入图片描述

设置光标位置

input上的setSelectionRange函数用于设置光标位置。

记得设置之前先让input聚焦focus，如果没聚焦也就没光标啥事了。

入参两个参数必传，一个开始位置一个结束位置，都设置成同一个数字就行了。

还有第三个入参可以设置方向（“forward” | “backward” | “none”），比如可以从后往前开始计数位置。

<body>
  <input id="box" />
  <button onclick="test()">
    获取光标位置
  </button>
  <button onclick="test2(1)">
    设置光标位置为第一个字符与第二个字符之间
  </button>
</body>
<script>
  function test() {
    const input = document.getElementById('box')
    console.log(input.selectionStart)
  }

  function test2(index) {
    const input = document.getElementById('box')
    input.focus()
    input.setSelectionRange(index, index)
  }
</script>

在这里插入图片描述

标签：字符,位置,获取,selectionStart,设置,input,光标
来源： https://blog.csdn.net/weixin_43877799/article/details/121291979