前端光标操作获取光标位置,移动光标位置到最后

最新推荐文章于 2024-06-15 19:18:00 发布

全栈小董

最新推荐文章于 2024-06-15 19:18:00 发布

阅读量311

点赞数 5

分类专栏： javascript 文章标签：前端光标 javascript vue.js

本文链接：https://blog.csdn.net/buruyang/article/details/138182179

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章介绍了如何使用JavaScript获取和控制网页光标位置，包括使用`window.getSelection()`获取选区，`Range`对象处理文本范围，以及如何移动光标至指定位置。

摘要由CSDN通过智能技术生成

获取光标位置

const getCursorIndex = ()=>{
    // 获取当前光标位置
    setTimeout(()=>{
        const selection = window.getSelection();
        const range = selection.getRangeAt(0);
        const offset = range.startOffset;
        console.log('光标位置：', offset);
    })
}

const selection = window.getSelection();: 这行代码获取当前页面的 Selection 对象，Selection 对象表示用户选择的文本范围或光标的位置。
const range = selection.getRangeAt(0);: 这行代码通过 getRangeAt(0) 方法获取选区中的第一个 Range 对象，Range 对象代表了选取的文本范围。
const offset = range.startOffset;: 这行代码通过 startOffset 属性获取选区范围的起始偏移量，即光标或选取范围在选区起始节点内的偏移量位置。

移动光标位置到最后

let currentDom = document.getElementsByClassName('word-block')[0];
let range = document.createRange();
range.selectNodeContents(currentDom);
range.collapse(false);
let sel = window.getSelection();
sel?.removeAllRanges();
sel?.addRange(range);

let range = document.createRange();: 这行代码创建了一个 Range 对象，用于表示文档中的一段连续的区域。
range.selectNodeContents(currentDom);: 将 Range 对象的选区设置为 currentDom 元素的所有内容。
range.collapse(false);: 将选区的边界折叠到选区的结束位置，即将选区的焦点放在内容的末尾。
let sel = window.getSelection();: 获取当前文档的 Selection 对象，表示用户当前选取的文本范围或光标的位置。
sel?.removeAllRanges();: 清除当前 Selection 对象中的所有选区。
sel?.addRange(range);: 将之前创建的 Range 对象添加到 Selection 对象中，将选区设置为 currentDom 元素的内容的末尾位置。