大家好,我正在尽最大努力弄清楚如何在文本区域字段中获取突出显示单词的X/Y。
这是我当前的代码:
突出显示单词效果很好。您可以将您想要搜索的任何单词放在文本区域内。但是,一旦您按下获取X/Y线,它将显示X=5 Y=5,这是不正确的,因为根据codePen代码示例,它应该位于X=~250px by Y=~80px区域中。
有人知道如何解决这个问题吗?或者它是可解决的吗?
第一个问题:startOffset
和endOffset
与所选内容在屏幕上的位置无关。相反,它们与选择开始和结束的startContainer
或endContainer
中的字符或节点位置有关。这允许您确定跨越多个元素的选择的开始和结束字符或节点索引(假设选择从段落的粗体区域开始,并在其外部结束,startOffset
将是粗体元素文本内的索引,endOffset
将是粗体元素之后的Text
范围内的索引)。
好消息:在Range
对象上有一个名为getBoundingClientRect
的实验函数,它可以获取当前选定内容周围的边框的屏幕坐标。
textarea
或input
内时,getBoundingClientRect
不会返回准确的坐标。因此,除非您可以避免使用textarea
,例如通过使用内容可编辑的div(请参阅:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content),否则此解决方案可能不适用于您。
疯狂的替代方法:Canvas
对象具有测量文本尺寸的工具,因此,如果您真的是顽固的人,理论上可以测量textarea
中包含的文本的尺寸,包括模拟换行行为,以便独立计算所选文本在textarea
内的位置(不要忘记考虑滚动偏移量)。
下面是一个代码段,它直观地演示了选定Range
对象在更改时的状态。
var outline = document.getElementById('selection_outline');
var start_container = document.getElementById('start_container');
var end_container = document.getElementById('end_container');
var start_offset = document.getElementById('start_offset');
var end_offset = document.getElementById('end_offset');
document.addEventListener('selectionchange', function() {
var selection = document.getSelection();
if (selection) {
var range = selection.getRangeAt(0);
if (range) {
var bounds = range.getBoundingClientRect();
outline.style.top = `${bounds.top + window.scrollY}px`;
outline.style.left = `${bounds.left + window.scrollX}px`;
outline.style.width = `${bounds.width}px`;
outline.style.height = `${bounds.height}px`;
start_container.value = range.startContainer.tagName || range.startContainer.parentNode.tagName;
end_container.value = range.endContainer.tagName || range.endContainer.parentNode.tagName;
start_offset.value = range.startOffset;
end_offset.value = range.endOffset;
}
}
})
#selection_outline {
position: absolute;
border: 2px solid red;
pointer-events: none;
}
.flow-wrap-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flow-wrap-row > * {
white-space: nowrap
}
.flow-wrap-row > li {
margin-right: 1.5em;
}
ul {
padding-left: 1.5em;
}
input {
width: 80px;
}
This is a complex element with lots of selectable text and nested, and double nested elements!!!
Here is a contenteditable div with some simple content.
这篇关于如何获取文本区域内所选文本的屏幕坐标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持吉威生活!
[英文标题]How to get the screen coordinates for the selected text within a textarea
声明:本媒体部分图片、文章来源于网络,版权归原作者所有,如有侵权,请联系QQ:330946442删除。