目录
前言
获取光标位置
设置光标位置
尾言
前言
遇到一个场景，需要一些文本标签，点击自动添加进文本框，这时候就需要掌握如何获取与设置光标在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>
设置光标位置
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>
尾言
如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~
