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

在下月亮有何贵干

已于 2022-05-13 09:11:09 修改

阅读量1.5w

点赞数 5

分类专栏：开发工作中的小问题文章标签： javascript 前端 css3

于 2021-11-12 17:28:10 首次发布

本文链接：https://blog.csdn.net/weixin_43877799/article/details/121291979

版权

开发工作中的小问题专栏收录该内容

30 篇文章 1 订阅

订阅专栏

前言

遇到一个场景，需要一些文本标签，点击自动添加进文本框，这时候就需要掌握如何获取与设置光标在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>