【javascript】控制输入框光标或者富文本光标

前言

• 最近看别人代码时发现别人使用selection操作光标，觉得很有意思，特别记录下。

MDN

• selection-api
• range-api

调用说明

• selection实际是拖蓝，但也可以理解为光标，因为光标是间距为0的拖蓝。
• 这个封装有点像vscode或者codemirror那种，实际range是个对象，控制selection需要传给其range对象。
• 获取selection:

const sel = window.getSelection();

• 获取range:

let range = sel.getRangeAt(0);

• 其中，0代表第几个选中，因为用户按住control后可以有多个选中，如果没有多个选中你取个1什么的直接报错。
• 克隆range:

	range = range.cloneRange();

• 如果你需要修改range，可以克隆出来。
• 修改range：

	range.setStartAfter(dom!);
	range.collapse(true);

• range的计算可以通过dom计算，把光标移动到某处，
• 修改执行：

sel.removeAllRanges();
sel.addRange(range);

• 当修改了range后，需要赋给selection对象才可以，使用selection的addRange执行修改。

range其他api：

Range.setStart()
设置 Range 的起点。
Range.setEnd()
设置 Range 的终点。
Range.setStartBefore()
以其它节点为基准，设置 Range 的起点。
Range.setStartAfter() (en-US)
以其它节点为基准，设置 Range 的起点。
Range.setEndBefore() (en-US)
以其它节点为基准，设置 Range 的终点。
Range.setEndAfter() (en-US)
以其它节点为基准，设置 Range 的终点。
Range.selectNode()
使 Range 包含某个节点及其内容。
Range.selectNodeContents()
使 Range 包含某个节点的内容。
Range.collapse()
将 Range 折叠至其端点（boundary points，起止点，指起点或终点，下同）之一。