如何获取与设置光标在input框的位置
前言
遇到一个场景，需要一些文本标签，点击自动添加进文本框，这时候就需要掌握如何获取与设置光标在input框的位置，做一个记录，记录使用方法。
获取光标位置
input的dom上存在一个属性selectionStart可以获取光标起始位置，一个属性selectionEnd为结束位置。
当光标只是选中在某个位置时，这两个值相同，值为数字，光标在input中第一个字符的左边开始记作0，第一个字符和第二个字符之间为1，依次类推。
当光标选种文本的某一段内容时，这两个值分别得到选中文本的前面与后面的位置，位置数字仍然是以上方的形式得到。
需要注意两点：
一开始input未聚焦前，selectionStart和selectionEnd默认为0。
如果光标选中了一个位置或者一段文本，再失去焦点，selectionStart与selectionEnd仍然是失去焦点前选中的结果。
<body>
<input id="box" value="111"/>
<button onclick="test()">
获取光标位置
</button>
<script>
function test() {
const input = document.getElementById('box')
console.log(input.selectionStart,input.selectionEnd)
}
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
设置光标位置
input上的setSelectionRange函数用于设置光标位置。
记得设置之前先让input聚焦focus，如果没聚焦也就没光标什么事了。
入参两个参数必传，一个开始位置一个结束位置，都设置成同一个数字就可以选中固定位置，如果设置为两个数字，等于用鼠标选中两个位置之间的文本。
还有第三个入参可以设置方向（“forward” | “backward” | “none”），比如backward可以从后往前开始计数位置。
<body>
<input id="box"/>
<button onclick="test()">
获取光标位置
</button>
<button onclick="test2()">
设置光标位置为第一个字符与第二个字符之间
</button>
<script>
function test() {
const input = document.getElementById('box')
console.log(input.selectionStart)
}
function test2(index) {
const input = document.getElementById('box')
input.focus()
input.setSelectionRange(1, 2)
}
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
尾言
如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~
————————————————
版权声明：本文为CSDN博主「在下月亮有何贵干」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43877799/article/details/121291979
