背景
一天产品大大向 boss 汇报完研发成绩和产品业绩产出,若有所思的走进去,劲直向我走过去,嘴角微微上扬。
产品大大:boss 对咱们的研发成绩挺称心的,balabala…(心田 OS:不听,讲重点)
产品大大:咱们的客服 IM 桌面客户端当初曾经有能力做到 1 对多接待在线访客了,前面咱们想要将专项问题访客在以后接待客服不能解决的状况下,能够拉专项客服发动群聊。
我:嗯,这个想法不错,专项客服还能一眼看到之前对话上下文,访客还毋庸从新发动聊天。
哒哒哒,性能做完了,两周后上线验收,客户很称心,boss 在群里也点了个 👍🏻。
产品大大又来了:嗯,这个性能不错,咱们也反对给客服本人群聊吧,有助于客服群体沟通和问题反馈。
我:嗯,这个想法也不错,群聊的内容也有助于前期的用户声音数据挖掘。
哐哐哐,做好了,上线,调整好心态,静等被各路大佬 👍🏻 吞没。
客服 A:搞毛啊,你们群聊都不给个 @性能,我怎么 diao 你们研发啊。
客服 B/C/D:➕10086。
我:。。。
哈哈哈,下面的虚构场景纯属好玩,上面就怎么完满的实现一个 @性能开展,包教包会。
在进入正题之前,咱们先准备一些对光标选区的“基操”常识。而对光标选区的操作在页面上的元素大抵分为两大类:text/textarea 文本输入框元素和富文本元素。上面别离对一些罕用 API 进行简略介绍。
text/textarea 文本输入框中操作光标选区
首先看这类操作形式,简直能够不必 Selection
和 Range
相干 API,应用的是文本输入框元素原生办法。
被动选中某一区域
被动选中在文本输入框元素某一区域能够应用 setSelectionRange。
element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection]);
- selectionStart 被选中的第一个字符的地位索引,从 0 开始。
- selectionEnd 被选中的最初一个字符的 下一个 地位索引。
- selectionDirection 抉择方向的字符串。
$input.setSelectionRange(0, 6);
// $input.select() // 全副选中
$input.focus();
聚焦到某一地位
如果咱们想把光标挪动到 😃😄😁 前面,其实是将选区起始地位设置雷同的成果
$input.setSelectionRange(6, 6);
$input.focus();
还原之前的选区
有些场景,咱们抉择了以后 input
文本框选区,要去做别的操作,回来后要复原选区,这时在做别的操作之前就要将选区地位存下来,会用到 selectionStart
和 selectionEnd
两个属性。
$input.addEventListener('mouseup', () => {
this.pos = {
start: $input.selectionStart,
end: $input.selectionEnd,
};
});
const {start, end} = this.pos;
$input.setSelectionRange(start, end);
$input.focus();
在指定选区插入(替换)内容
指定文本输入框的某个地位插入内容或者替换选区的内容,能够应用 setRangeText 实现。
setRangeText(replacement)
setRangeText(replacement, start, end, selectMode)
这个办法有 2 种模式,第二种模式有 4 个参数:
- 第一个参数
replacement
是替换文本; start
和end
是起始地位,默认值该元素以后选中的区域的地位;- 最初一个参数
selectMode
是替换后选区的状态,它有 4 个状态:select(替换后选中)、start(替换后光标位于替换词之前)、end(替换后光标位于替换词之后)和 preserve(默认值,尝试保留选区);
咱们将光标或者选区地位插入或者替换文本 😂😂😂,能够这样
$input.setRangeText('😂😂😂');
$input.focus();
上面再来看看第二种有 4 个参数模式,发现会在咱们指定的起始地位插入内容后,以后的选区和光标尝试保留。替换后选区的状态另外 3 种场景大家能够自行测试。
$input.setRangeText('😂😂😂', 8, 8, 'preserve');
$input.focus();
对于选区的操作在 input/textarea 输入框中的操作罕用的差不多就这些,上面简略总结一下
富文本中操作光标选区——Selection & Range
设置富文本
首先富文本元素是可编辑元素,能够在元素上看到光标,除了表单元素,还有给一般元素增加属性能够转换文富文本元素,能够通过一下三种形式转换。
- 给元素增加属性
contenteditable="true"
; - 增加 CSS 属性
-webkit-user-modify: "read-write"
; - 通过 js 的
document.designMode="on"
形式设置;
Selection & Range
在富文本中对光标及选区的操作,不得不提 JavaScript 的两个原生对象:Selection 和 Range。
- Selection 对象示意用户抉择的文本范畴或插入符号的以后地位。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标通过文字而产生。要获取用于查看或批改的
Selection
对象,请调用 window.getSelection()。 - Range 对象示意蕴含节点和局部文本节点的文档片段。通过
selection
对象取得的range
对象才是咱们操作光标的重点。
大家可能留神到 getRangeAt(0)
,选区可能会有多个 range
? 还真是,在 Firefox 反对多个选区,通过 cmd
键(windows
上是 ctrl
键)能够实现多选区。
再看一个 range 返回的一个属性,collapsed
,示意选区的终点与起点是否重叠。当 collapsed
为true
时,选中区域被压缩成一个点,对于一般的元素,可能什么都看不到,如果是在可编辑元素上,那这个被压缩的点就变成了能够闪动的光标。
被动选中富文本的某个节点
选中富文本中的某个独立标签,能够用到两个 API,Range.selectNode() 和 Range.selectNodeContent(),两者不同的是前者包含节点本身,后者不包含本身。比方咱们想独立选中富文本的第二个子元素<span style="color: #00965e;">Selection</span>
,应用 Range.selectNode()
API 选中元素,删除的是整个元素,再输出内容是没有款式的。
const $span = $input.childNodes[1];
range.selectNode($span);
selection.removeAllRanges();
selection.addRange(range);
当然局部浏览器(比方 Chrome104)是有差别的,在删除整个节点后,新输出的内容时会插入一个标签(font
)并集成之前的款式。
应用 Range.selectNodeContents()
API 选中的是节点外部内容,当删除选中内容后,节点自身还在。
const $span = $input.childNodes[1];
range.selectNodeContents($span);
selection.removeAllRanges();
selection.addRange(range);
以上是对富文本中单个节点的选中操作,然而,实际上富文本中的节点可能是嵌套或者平行的,怎么跨多个元素去选中操作呢?
被动选中富文本的某一区域
表单输入框只有繁多文本,而富文本元素或者一般元素蕴含多个元素。当被动选中页面某一区域,先要创立一个 Range
对象,可能会跨多个元素,所以要设置选区的起始节点,别离是 Range.setStart() 和 Range.setEnd() 办法。
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
- startNode 开始节点
- startOffset 从 startNode 的开始地位算起的偏移量
- endNode 完结节点
- endOffset 从 endNode 的完结地位算起的偏移量
下面是设置选区范畴,而后将其增加到选区并选中 Selection.addRange()。不过,个别在增加前,会革除之前的选区,这时就要用到 Selection.removeAllRanges()。
const selection = document.getSelection();
const range = document.createRange();
range.setStart($input.firstChild, 0);
range.setEnd($input.firstChild, 4);
selection.removeAllRanges();
selection.addRange(range);
留神这里取富文本元素的第一个子节点(文本节点),而不是元素自身,否则就会超出偏移量,呈现报错。因为在计算元素节点和文本节点偏移量是有差异的:
如果起始节点类型是 Text、Comment 或 CDATASection 之一,那么 startOffset 指的是从起始节点算起字符的偏移量。对于其余 Node 类型节点,startOffset 是指从起始结点开始算起子节点的偏移量。
那么问题来了,如果我想选中富文本结尾这一段 😃😄😁<span style="color: #00965e;">Selection</span> 对象
,怎么实现呢?
对于比较复杂的富文本元素构造,要实现任意区间选中,要害要找到起始节点和完结节点,以及它们各自的偏移量。
如同没有更好的原生办法能够借助,这里有一种计划,首先遍历出富文本蕴含所有的文本节点,而后记录每个节点边界的偏移量,查找出满足区间条件的起始和完结节点,最初从起始和完结节点中计算各自须要的文本偏移量。
/**
* 获取所有文本节点及其偏移量
* @param {HTMLElement} wrapDom 最外层节点
* @param {Number} start 开始地位
* @param {Number} end 完结地位
* @returns
*/
function getNodeAndOffset(wrapDom, start = 0, end = 0) {const txtList = [];
const map = function (children) {[...children].forEach((el) => {if (el.nodeName === '#text') {txtList.push(el);
} else {map(el.childNodes);
}
});
};
// 递归遍历,提取出所有 #text
map(wrapDom.childNodes);
// 计算文本的地位区间
const clips = txtList.reduce((arr, item, index) => {
const end =
item.textContent.length + (arr[index - 1] ? arr[index - 1][2] : 0);
arr.push([item, end - item.textContent.length, end]);
return arr;
}, []);
// 查找满足条件的范畴区间
const startNode = clips.find((el) => start >= el[1] && start < el[2]);
const endNode = clips.find((el) => end >= el[1] && end < el[2]);
return [startNode[0], start - startNode[1], endNode[0], end - endNode[1]];
}
有了这个咱们本人封装的工具办法,就能够选中任意文字区间,而不必思考富文本的元素构造。
const selection = document.getSelection();
const range = document.createRange();
const nodes = this.getNodeAndOffset($input, 4, 17);
range.setStart(nodes[0], nodes[1]);
range.setEnd(nodes[2], nodes[3]);
selection.removeAllRanges();
selection.addRange(range);
聚焦到某一地位
通过下面已实现选中任意区间文字,再来看将光标聚焦到某一地位,就简略多了,只选将起始和完结范畴地位设置雷同即可。
const selection = document.getSelection();
const range = document.createRange();
const nodes = this.getNodeAndOffset($input, 7, 7);
range.setStart(nodes[0], nodes[1]);
range.setEnd(nodes[2], nodes[3]);
selection.removeAllRanges();
selection.addRange(range);
还原之前的选区
同文本输入框保留以后的光标地位,在富文本里,能够将整个选区都保留下来,而后在前面还原选区。
// 保留光标
$input.addEventListener('mouseup', () => {const selection = document.getSelection();
const range = selection.getRangeAt(0);
this.lastRange = range;
});
// 还原光标
const selection = document.getSelection();
const range = document.createRange();
selection.removeAllRanges();
selection.addRange(this.lastRange);
在指定选区插入(替换)内容
在选区插入内容,能够应用 Range.insertNode() 办法,它示意在选区的起点处插入一个节点,并且不会替换以后曾经选中的,如果须要替换,能够先删除,删除选区能够用 Range.deleteContent() 办法。
const $text = document.createTextNode('😂😂😂');
this.lastRange.deleteContents();
this.lastRange.insertNode($text);
从下面客服发现,插入内容后,内容是被选区选中状态,如果心愿光标在插入的内容前面,能够应用 Range.setStartAfter() 设置选区的终点为元素的前面,默认选区的起点在元素的前面 Range.setEndAfter(),毋庸设置。
this.lastRange.setStartAfter($text);
$input.focus();
同样,也能够应用 Range.setEndBefore 和 setStartBefore 将光标设置到内容的后面。
给指定选区包裹标签
还有一些比拟高级的用法利用,比方给某句话加背景标记成果,相似 word 文档文字选中加背景色。能够通过 Range.surroundContents() 办法实现。
不过,入选区蕴含多个元素,也就是断开了一个非 text 节点,只蕴含了节点的其中一个边界,就会抛出异样。
那么怎么能够躲避这个问题,实现跨多个节点选中标记呢?答案是 extractContents(),它会将咱们的选区多节点挪动到 DocumentFragment
对象,须要留神的是
应用 DOM 事件增加的事件监听器在提取期间不会保留。HMTL 属性事件将按 Node.cloneNode() 办法原样保留和复制。HTML id 属性也会被克隆,如果提取了局部选定的节点并将其附加到文档中,则可能导致有效的文档。
用标签包裹该文档片段,而后插入。
const $mark = document.createElement('mark');
// this.lastRange.surroundContents($mark)
const fragments = this.lastRange.extractContents();
$mark.append(fragments);
this.lastRange.insertNode($mark);
光标 / 选区的地位坐标
有时咱们想确定文本区域中被选中的局部或者光标的视窗坐标,以此能够将相似备注或者悬浮框定位到左近。这里能够应用 Range.getBoundingClientRect() API,它返回一个 DOMRect 对象,该对象将范畴中的内容包围起来;即该对象是一个将范畴内所有
元素包围起来的矩形。
const pos = this.lastRange.getBoundingClientRect();
const highlight = document.getElementById('highlight');
highlight.style.left = `${pos.x}px`;
highlight.style.top = `${pos.y}px`;
highlight.style.width = `${pos.width}px`;
highlight.style.height = `${pos.height}px`;
#highlight {
position: absolute;
background-color: aqua;
}
选中了 3 行,但不是残缺的 3 行,给回的信息是一个最小包裹选区的矩形地位坐标,如果还须要晓得选取中每个元素更具体的地位坐标,能够应用 Range.getClientRects(),它返回的是一个 DOMRect 对象列表,示意 Range 在屏幕上所占的区域。这个列表相当于会集了范畴中所有元素调用 Element.getClientRects()办法所失去的后果。
this.lastRange.getClientRects();
Selection&Range 的 API 很多,罕用的大抵以上列举的,同样简略总结一下
@的性能实现
如果你曾经相熟了下面的「基操」,那么对于实现一个 @性能曾经胜利了一半,剩下的一半就是思路了,大抵分为如下几步:
- 监听用户输出了
@
字符,展现用户列表; - 点击用户,导致输入框失焦,及时保留光标信息;
- 点击实现,用户列表暗藏,复原输入框的光标,而后在光标后插入用户名;
首先咱们写好 HTML
,CSS
局部在这里省略
<!-- 富文本聊天音讯输入框 -->
<div
class="chat-input"
ref="chatInput"
contenteditable="true"
placeholder="请输出内容"
@input="inputChatContent"
@blur="chatContentBlur"
@mouseup="chatContentMouseup"
></div>
<!-- 用户列表浮窗 -->
<ul
class="popper"
v-show="isShowUserList"
ref="popper"
:style="popperStyle"
v-click-out-hide
>
<li v-for="(item, index) in userList" :key="index" @click="selectUser(item)">
<el-row>{{item.name}}</el-row>
</li>
</ul>
接着咱们监听富文本的 input
事件,当监听到 @ 字符,展现用户列表,否则暗藏。于此同时,应用 Range.getBoundingClientRect() 获取光标的地位,这样能力将用户列表浮框定位到光标左近。
/**
* 输出聊天内容
* @param {*} ev
*/
inputChatContent(ev) {if (ev.data === '@') {const pos = this.getCaretPos()
this.showUserList()
this.$nextTick(() => {this.setUserListPos(pos)
})
} else {this.hideUserList()
}
},
/**
* 获取光标地位
* @returns
*/
getCaretPos() {const range = this.getRange()
const pos = range.getBoundingClientRect()
return pos
},
/**
* 设置用户列表的地位
* @param {*} pos
*/
setUserListPos(pos) {
const $popper = this.$refs.popper
const panelWidth = $popper.offsetWidth
const panelHeight = $popper.offsetHeight
const {x, y} = pos
this.popperStyle = {
top: y - panelHeight - 20 + 'px',
left: x - panelWidth / 2 + 'px'
}
},
hideUserList() {this.isShowUserList = false},
showUserList() {this.isShowUserList = true},
当点击用户列表时,输入框会失焦,此时先将光标保存起来,同时创立将要插入的用户名文本节点,而后复原光标,再 Range.insetNode()
将用户名文本节点 Range.insetNode()
插入到选区,最初 Selection.removeAllRanges()
移除所有页面选区,Selection.addRange()
插入以后选区。
/**
* 抉择用户
*/
selectUser(user) {
// 让失焦事件先执行
setTimeout(() => {this.hideUserList()
this.insertContent(user)
})
},
/**
* 复原光标
*/
restoreCaret() {if (this.lastRange) {const selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(this.lastRange)
}
},
/**
* 插入内容
* @param {*} data
*/
insertContent(data) {this.restoreCaret() // 还原光标
const selection = window.getSelection()
const range = selection.getRangeAt(0)
range.collapse(false) // 折叠选区,光标移到最初
range.insertNode(data.content)
range.collapse(false)
selection.removeAllRanges()
selection.addRange(range)
}
@性能加强版
以上是简略实现了 @ 性能,在理论利用中还有更多晋升用户体验的中央
- 以后通过退回键删除用户名
@xxx
,发现删除的是一一字符,而用户更多想要的是按一下退回键,删除整个用户名; - 发送进来怎么解析成后端能辨认的特定的数据结构,并且特定的数据结构怎么转换回富文本呢?
暂且带这两个问题,接着怎么解决呢?
实现整体删除用户名
首先想到的是用户名插入富文本是一个标签,按一下退回键,就能删除整个标签?答案是不能,富文本标签里的文字在没有选中状况下都是一一删除。除非该元素是不可编辑元素 span.contentEditable = false
。
这里要将 @xxx
放入不可编辑标签中,删除的时候能力一起删。此时会有一个问题,每次插入用户标签后,多出一个 @ 字符,所以在之前曾经输出的 @ 字符就须要在插入标签前须要删除掉。具体实现是找到选区所在的开始节点 Range.startContainer
,再找到选区完结地位的偏移量 Range.endOffset
,失常状况下选区完结地位的前一个就是 @字符,选中删除即可。
/**
* 删除输入框中光标地位现有的 @字符
*/
deleteCaretAtCode() {const range = this.getRange()
// 光标开始节点和光标在节点上的偏移量,找到光标精确地位,选中光标地位前一个字符范畴并删除,const node = range.startContainer
const end = range.endOffset
// 开始节点内容最初一个字符是 @,删除,否则不删除
if (node.textContent[end - 1] === '@') {range.setStart(node, end ? end - 1 : 0)
range.deleteContents()}
},
/**
* 转换要插入光标地位的内容
* @param {*} data
*/
parseContent(data) {const { type = 'text', name} = data
let content = null
// type 是插入内容类型,可能是文本、@标签、图片、表情等
if (type === 'text') {content = document.createTextNode(name)
} else if (type === 'at') {
// 删除输入框中光标地位现有的 @字符
this.deleteCaretAtCode()
const $span = document.createElement('span')
$span.contentEditable = false
$span.classList.add('tag')
$span.innerHTML = `@${name}`
// 插入一个空格字符(\u0010)到 @标签前面,能够解决局部浏览器上光标在聊天输入框前面
const $space = document.createTextNode('\u0010')
const frag = document.createDocumentFragment()
frag.appendChild($span)
frag.appendChild($space)
content = frag
}
return content
},
/**
* 插入内容
* @param {*} data
*/
insertContent(data) {this.restoreCaret() // 还原光标
const selection = window.getSelection()
const range = selection.getRangeAt(0)
range.collapse(false) // 折叠选区,光标移到最初
const pc = this.parseContent(data)
range.insertNode(pc)
range.collapse(false)
selection.removeAllRanges()
selection.addRange(range)
}
一些兼容解决
可能你曾经留神到了,在用户标签 @xxx
前面追加了一个空格字符,这样光标能够显示进去,不过在用退格键须要按两次删除标签,这里具体的要看业务须要了。
留神的是在 Mac Chrome(V104)上,如果在标签前面不追加字符,光标会在外层富文本标签前面,在非编辑标签后加任意字符是失常的。
通过测试 Firefox 浏览器有这样的 bug:用户标签 @xxx
没有正确的插入到富文本输入框的地位,而是插入到了用户列表点击的那一项上了。
大胆揣测 Firefox 将一般元素也能够设置光标,这样点击用户列表某一项元素时,该元素取得光标,再获取新选区 selection.getRangeAt(0)
其实是在点击的这个元素上,非复原的富文本输入框上,而后插入用户标签,也就是下面的情景。
这里我的解决办法是将用户列表项设置为不可选中的,天然就无奈获取光标。
.popper li {
/* 用户不能选中文本 firfox 非编辑编辑元素也可选中 */
user-select: none;
-webkit-user-select: none;
list-style: none;
padding: 10px;
}
咱们再看看再 Safari 上的体现
发现是没有依照料想的删除掉前置的 @
字符的,查看控制台有报错
大抵意思是 selection.getRangeAt(0)
中第 0 位是超出容许的范畴的,难道在输入框失去焦点的情景下,Safari 默认将选区给清空了?通过试验发现的确如此
// 输入框失去焦点和获取焦点时打印选区个数
const selection = window.getSelection();
console.log('selection.rangeCount:', selection.rangeCount);
而失常其余浏览器选区个数放弃不变
那怎么解决这种情景呢?咱们是在输入框失焦的时候保留选区的,此时 Safari 曾经清空了选区,导致这个时候保留的选区是空的,因而咱们要将选区保留前置一下,在输出 @
字符时候就保留一下选区(光标),能够这样做
/**
* 输出聊天内容
* @param {*} ev
*/
inputChatContent(ev) {if (ev.data === '@') {
// 在输出 @字符时候就保留一下光标
this.saveCaret()
const pos = this.getCaretPos()
this.showUserList()
this.$nextTick(() => {this.setUserListPos(pos)
})
} else {this.hideUserList()
}
},
总结
本文以“完满”实现一个 @ 性能为引子,介绍了 input/textarea 文本输入框和富文本的选区操作。并在此基础上联合 @ 性能的实现思路,边实际边改良,不乏有很多中央没有思考周全的,仅当作学习的 demo 就好,欢送斧正。本文在线案例能够点这里,完~