web关于“选区”和“光标”相关API介绍

一、两个重要的对象:


  1. Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。通常由用户拖拽鼠标经过文字而产生。
  2. Range对象表示包含节点和部分文本节点的文档片段。通过 selection 对象获得的 range 对象才是我们操作光标的重点。

二、可编辑元素


1、默认的表单输入框 inputtextarea
<input type="text">
<textarea></textarea>

(1)设置选区:

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

参数:selectionStart (起始位置)、 selectionEnd (结束位置)和 selectionDirection(方向)

(2)获取选区:

inputElement.selectionStart()
inputElement.selectionEnd()

(3)全部选中:

inputElement.select()

(4)输入框插入内容:

inputElement.setRangeText(replacement, start, end [, selectMode]);

作用:只填第一个参数,则会将内容插入手动选区位置。如果填了start和end,则就算鼠标选区,也只会粘贴到start到end范围。

第一个参数replacement ,表示需要替换的文本。startend是起始位置,默认是该元素当前选中区域,最后一个参数selectMode,表示替换后选区的状态,有 4 个可选项

  • select 替换后选中
  • start 替换后光标位于替换词之前
  • end 替换后光标位于替换词之后
  • preserve 默认值,尝试保留选区
2、contenteditable="true"或 -webkit-user-modify: read-write;
<div contenteditable="true">yux阅文前端</div>
div{
    -webkit-user-modify: read-write;
}

(1)Window.getSelection();

返回一个Selection对象,表示用户选择的文本范围或光标的当前位置。

(2)document.createRange();

创建一个Range对象。

(3)selection.getRangeAt(index)

返回一个包含当前选区内容的区域对象,index一般是0。

(4)selection.removeAllRanges()

从当前selection对象中移除所有的range对象,取消所有的选择只留下anchorNode(只读属性返回选区开始位置所属的节点)和focusNode属性(只读的,返回所选内容的结束位置部分所属的节点)并将其设置为null。
(5)selection.addRange(range)

向选区(Selection)中添加一个区域(Range)。

(6)range.setStart(node,offset)、range.setEnd(node,offset)

设置区域起始位置。

(7)range.selectNode(node)、range.selectNodeContents(node)

这两个都是表示选中某一节点,不同的是,selectNodeContents仅包含子节点,不包含自身。

(8)range.insertNode(newNode)

它表示在选区的起点处插入一个节点,并不会替换掉当前已经选中的,如果要替换,可以先删除。

(9)range.deleteContents()

删除文档的区域,必须是一个节点,如果是文本,可以用 document.createTextNode 来创建。

(10)range.setStartAfter(node)

 设置node元素中区间(光标)的起点为该元素的后面,终点默认就是该元素的后面,不用处理。

(11)range.surroundContents

将 Range对象的内容移动到一个新的节点,并将新节点放到这个范围的起始处。(如果Range断开了一个非Text节点,只包含了节点的其中一个边界点,就会抛出异常)

(12)range.extractContents

获取选区内容。该方法返回的是一个 DocumentFragment 对象,将选区内容添加到新节点上,然后插入新内容。

参考文献:

Web 中的“选区”和“光标”icon-default.png?t=N7T8https://segmentfault.com/a/1190000041457245#item-4-10

  • 20
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

DytLisa

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值