likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 6

前言

遇到一个场景，需要一些文本标签，点击自动添加进文本框，这时候就需要掌握如何获取与设置光标在input框的位置，做一个记录，记录使用方法。

获取光标位置

input的dom上存在一个属性selectionStart可以获取光标起始位置，一个属性selectionEnd为结束位置。

当光标只是选中在某个位置时，这两个值相同，值为数字，光标在input中第一个字符的左边开始记作0，第一个字符和第二个字符之间为1，依次类推。

当光标选种文本的某一段内容时，这两个值分别得到选中文本的前面与后面的位置，位置数字仍然是以上方的形式得到。

需要注意两点：

  1. 一开始input未聚焦前，selectionStart和selectionEnd默认为0。

  2. 如果光标选中了一个位置或者一段文本，再失去焦点，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>

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

设置光标位置

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>

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

尾言

如果觉得文章对你有帮助的话，欢迎点赞收藏哦，有什么错误或者意见建议也可以留言，感谢~