getSelection限制选取范围

本文主要是介绍getSelection限制选取范围，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

// 选择容器元素
const box = document.queryselector('.box');// 监听选择事件
document.addEventListener('mouseup', (e) => {// 如果选择不在box内部，清除选择if (!box.contains(e.target)) {window.getSelection().removeAllRanges();}
});// 监听键盘事件，以防用户使用键盘进行选择
document.addEventListener('keyup', (e) => {// 检查是否有文本被选中const selection = window.getSelection();if (!box.contains(selection.anchorNode)) {selection.removeAllRanges();}
});

在自己手写富文本编辑器时通常会用到这一点

//通过vue3绑定编辑器dom
const editorRef = ref()//选中的文本
const text = ref('')
//选择器
const selection = ref({})
//位置信息
const range = ref(null)
//选中的文本所在节点
const node = ref(null)
const getContext = ()=>{selection.value = window.getSelection()if(selection.value.isCollapsed) returnif(selection.value.rangeCount <= 0) returntext.value = selection.value.toString()range.value = selection.value.getRangeAt(0)//父节点const element = range.value.commonAncestorContainer;/*过滤不是元素节点情况contains用于判断某个dom节点是否为另一个节点的子元素。用法示例:parentNode.contains(childNode)当前语句意为：当选中内容为dom且处于编辑器区域中时，获取被选中的文本所在的dom节点，并将之存入变量，如果不是dom节点那么将它的父元素存入变量。如果选中的内容超出了编辑器区域直接存入null，这样就可以起到限制getSelection()作用范围的效果。有兴趣的可以看看我写的简易版富文本编辑器，目前正在编码中后续测试无BUG后会贴出地址。*/if (element.nodeType === Node.ELEMENT_NODE && editorRef.value.contains(element)) {node.value = element} else if(editorRef.value.contains(element.parentElement)){node.value = element.parentElement}else{node.value = null}}

这篇关于getSelection限制选取范围的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---