js 如何获取与设置光标在input框的位置 | 您所在的位置:网站首页 › js隐藏input输入框 › js 如何获取与设置光标在input框的位置 |
本文已参与「新人创作礼」活动,一起开启掘金创作之路。 前言遇到一个场景,需要一些文本标签,点击自动添加进文本框,这时候就需要掌握如何获取与设置光标在input框的位置,做一个记录,记录使用方法。 获取光标位置input的dom上存在一个属性selectionStart可以获取光标起始位置,一个属性selectionEnd为结束位置。 当光标只是选中在某个位置时,这两个值相同,值为数字,光标在input中第一个字符的左边开始记作0,第一个字符和第二个字符之间为1,依次类推。 当光标选种文本的某一段内容时,这两个值分别得到选中文本的前面与后面的位置,位置数字仍然是以上方的形式得到。 需要注意两点: 一开始input未聚焦前,selectionStart和selectionEnd默认为0。 如果光标选中了一个位置或者一段文本,再失去焦点,selectionStart与selectionEnd仍然是失去焦点前选中的结果。 获取光标位置 function test() { const input = document.getElementById('box') console.log(input.selectionStart,input.selectionEnd) }input上的setSelectionRange函数用于设置光标位置。 记得设置之前先让input聚焦focus,如果没聚焦也就没光标什么事了。 入参两个参数必传,一个开始位置一个结束位置,都设置成同一个数字就可以选中固定位置,如果设置为两个数字,等于用鼠标选中两个位置之间的文本。 还有第三个入参可以设置方向("forward" | "backward" | "none"),比如backward可以从后往前开始计数位置。 获取光标位置 设置光标位置为第一个字符与第二个字符之间 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) }如果觉得文章对你有帮助的话,欢迎点赞收藏哦,有什么错误或者意见建议也可以留言,感谢~ |
CopyRight 2018-2019 实验室设备网 版权所有 |