BOM Range对象文字内容选中

isaced 发布于2019-08-20 14:47 / 1683人阅读

摘要：参数被选中的第一个字符的位置。对象什么是对象表示包含节点和部分文本节点的文档片段。一切有关于户文本选择范围的信息都归对象掌管。用对象的方法取得。

最初是因为textarea赋值后，focus光标一直定位到第一个文字的bug，搜之，发现有这样一个API：HTMLInputElement.setSelectionRange,可以设置一个input元素中的文本选中内容的起始位置和结束位置。

inputElement.setSelectionRange(selectionStart, selectionEnd, [optional] selectionDirection);

参数
    selectionStart
    被选中的第一个字符的位置。
    selectionEnd
    被选中的最后一个字符的 下一个 位置。
    selectionDirection (可选)
    一个指明选择方向的字符串，有"forward","backward"和"none" 3个可选值, 分别表示"从前往后", "从后往前"和"选择方向未知或不重要"。

然后发现了range对象觉得有点厉害，写个文章学习一下。

Range对象

什么是range对象？Range表示包含节点和部分文本节点的文档片段。一切有关于户文本选择范围的信息都归range对象掌管。例如：

但是在浏览器的发展历史中，衍生出了3个功能类似的对象,分别为W3C range,MOZ selection,IE textRange。

W3C range

range对象如何来？

Document 对象的 createRange方法创建。

用Selection对象的getRangeAt方法取得。

通过构造函数 Range()。
API

MOZ selection

通过window.selection获取Seletion对象。
API

IE textRange

textRange

实现

可以做一些@出现用户名称效果和#话题#，复制时带上自信息。

云服务器 GPU云服务器 Range对象文字选中被选中文字选中文本内容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81922.html

原生JS写一个功能强大的编辑器

摘要：主要采用了原生与调用结合的功能实现功能。所以根据这种方法，读者可以根据自己的需求添加更多的功能，比如在编辑框里面插入一个可以点击的标签或者添加一个代码块希望能读到此文章的读者，能在下方一起交流，更希望大佬提出错误，谢谢地址因为一个同学，要做一个能加入图片的留言板功能，类型与QQ空间留言板和百度贴吧发帖的那种形式，同时在网上找了找发生网上对这方面的交流很少，所以发表这篇文章抛砖引玉，希...

luck 2019-08-21 17:09 评论0 收藏0
原生JS写一个功能强大的编辑器

摘要：主要采用了原生与调用结合的功能实现功能。所以根据这种方法，读者可以根据自己的需求添加更多的功能，比如在编辑框里面插入一个可以点击的标签或者添加一个代码块希望能读到此文章的读者，能在下方一起交流，更希望大佬提出错误，谢谢地址因为一个同学，要做一个能加入图片的留言板功能，类型与QQ空间留言板和百度贴吧发帖的那种形式，同时在网上找了找发生网上对这方面的交流很少，所以发表这篇文章抛砖引玉，希...

王晗 2019-08-01 17:48 评论0 收藏0
你可能不知道的JS关于选中文本区域的操作

摘要：先普及一些关于文本选择范围的基础知识。可以调用的方法，结果就会打印出我们选择的文本内容。用脚本可以实现中包含多个的情况。表示当前范围是否是闭合的。则表示当前范围的起始和结束是同一个位置。表示共同的祖先节点。声明：今天所分享的内容，都可以直接在控制台演示。先来思考几个问题。1.我在一个页面中随意点了一下，没有留下任何痕迹。你能捕捉到我刚才点的是哪个节点，以及鼠标的落脚点在哪两个字之间吗...

0xE7A38A 2019-08-02 15:39 评论0 收藏0
你可能不知道的JS关于选中文本区域的操作

摘要：先普及一些关于文本选择范围的基础知识。可以调用的方法，结果就会打印出我们选择的文本内容。用脚本可以实现中包含多个的情况。表示当前范围是否是闭合的。则表示当前范围的起始和结束是同一个位置。表示共同的祖先节点。声明：今天所分享的内容，都可以直接在控制台演示。先来思考几个问题。1.我在一个页面中随意点了一下，没有留下任何痕迹。你能捕捉到我刚才点的是哪个节点，以及鼠标的落脚点在哪两个字之间吗...

lauren_liuling 2019-08-26 10:23 评论0 收藏0