JavaScript中怎么操作光标和选区

发布时间:2021-06-30 11:18:53 作者:小新
来源:亿速云 阅读:126

这篇文章主要为大家展示了“JavaScript中怎么操作光标和选区”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JavaScript中怎么操作光标和选区”这篇文章吧。

在一些业务场景,比如高亮文本、输入编辑、等场景中需要对光标和选区进行操作时,可以使用浏览器提供的 Selection 对象和 Range 对象来操作光标和选区。

Selection 对象

Selection 对象表示用户选择的选区或插入符号的当前位置,它可能横跨多个元素。

//获取 Selection 对象
window.getSelection();

用户可能从左到右(与文档方向相同)选择文本或从右到左(与文档方向相反)选择文本。

anchor (锚点): 指用户开始选择的地方。  
focus  (焦点): 指用户结束选择的地方。

如果你使用鼠标选择文本的话,anchor 就指你按下鼠标键的地方,而 focus 就指你松开鼠标键的地方。anchorfocus 的概念不能与选区的起始位置和终止位置混淆,因为 anchor 可能在 focus 的前面,也可能在 focus 的后面,这取决于你选择文本时鼠标移动的方向,也就是按下鼠标键和松开鼠标键的位置。

如下图所示:

JavaScript中怎么操作光标和选区

JavaScript中怎么操作光标和选区

属性:

注意:    

以上所有属性都是只读属性

方法:

示例:
<div id="start"></div>
<div id="end"></div>
var start = document.querySelector("#start");
var end = document.querySelector("#end");
var selObj = window.getSelection();
selObj.setBaseAndExtent(start,0,end,0);

Range 对象

Range 对象表示被选中的文档片段。一个 Range 对象可能包含整个元素节点,也可能包含元素节点的一部分,例如文本节点的一部分文字。用户通常只能选择一个 Range 对象,但是有的时候用户也有可能选择多个 Range 对象(只有火狐浏览器可以选择多个 Range 对象)。

可以用 Document 对象的 Document.createRange 方法创建 Range,也可以用 Selection 对象的 getRangeAt 方法获取 Range。另外,还可以通过 Document 对象的构造函数 Range() 来得到 Range

属性:

注意:    

以上所有属性都是只读属性

方法:

选区中的多个区域

一个 Selection 对象表示用户选择的区域(Range 对象)的集合,通常它只包含一个区域,访问方式如下:

//获取一个 Selection 对象
var selObj = window.getSelection();
//获取一个 Range 对象
var rangeObj  = selObj.getRangeAt(0);

只有火狐浏览器实现了多个区域,如下图所示:

JavaScript中怎么操作光标和选区

修改选区样式

使用 ::selection 选择器可以匹配被选中的部分。  
目前只有一小部分 CSS 属性可以用于 ::selection 选择器:

示例

JavaScript中怎么操作光标和选区

以上是“JavaScript中怎么操作光标和选区”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. JavaScript自定义文本框光标
  2. 利用javascript怎么获取光标位置

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

javascript

上一篇:javascript中设置高的方法

下一篇:css中perspective属性和perspective()函数的异同点有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》