目前我在浏览器中获取所选文本:
window.getSelection();
Run Code Online (Sandbox Code Playgroud)
现在我需要在按下自定义键时显示该文本上方的工具提示(注意鼠标不能再在文本上方),所以为了做到这一点,我需要所选文本的绝对位置.
有没有办法做到这一点,可能将文本包装在标签内,然后获得偏移量?它只需要在Chrome中运行,而不是所有浏览器.
我使用鼠标在html页面(在firefox中打开)选择一些文本,并使用javascript函数,我创建/获取与所选文本对应的rangeobject.
userSelection =window.getSelection();
var rangeObject = getRangeObject(userSelection);
Run Code Online (Sandbox Code Playgroud)
现在我想突出显示rangeobject下的所有文本.我这样做,
var span = document.createElement("span");
rangeObject.surroundContents(span);
span.style.backgroundColor = "yellow";
Run Code Online (Sandbox Code Playgroud)
好吧,这个工作正常,只有当rangeobject(起始点和端点)位于同一个textnode中时,它才会突出显示相应的text.Ex
<p>In this case,the text selected will be highlighted properly,
because the selected text lies under a single textnode</p>
Run Code Online (Sandbox Code Playgroud)
但是如果rangeobject覆盖了多个textnode,那么它就不能正常工作,它只突出显示位于第一个textnode中的文本,Ex
<p><h3>In this case</h3>, only the text inside the header(h3)
will be highlighted, not any text outside the header</p>
Run Code Online (Sandbox Code Playgroud)
任何想法我怎么做,所有在rangeobject下的文本,突出显示,独立于范围是在单个节点还是多个节点?谢谢....
我有一个脚本可以更改已选择的文本的背景颜色.但是,当跨多个元素/标签选择文本时,我遇到了问题.
我得到的代码是:
var text = window.getSelection().getRangeAt(0);
var colour = document.createElement("hlight");
colour.style.backgroundColor = "Yellow";
text.surroundContents(colour);
Run Code Online (Sandbox Code Playgroud)
输出的错误是:
Error: The boundary-points of a range does not meet specific requirements. =
NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR
Line: 7
Run Code Online (Sandbox Code Playgroud)
我相信这与getRange()函数有关,虽然我不太清楚如何继续,因为我是javascript的初学者.
有没有其他方法可以复制我想要实现的目标?
非常感谢.
我正在尝试为页面创建一个学习工具,允许用户选择页面上的任何文本并单击按钮.然后,此单击将使用黄色背景格式化所选文本.我可以在单个标签内部进行此工作,但如果选择范围跨越多个标签(例如,无序列表中的第一个LI以及第二个的一半),我将难以应用该样式.不幸的是,我不能在这里用一个跨度包装选择.
基本上,我想关联的影响contentEditable,并execCommand没有除了背景颜色应用到选定的文本与按钮的点击实际进行任何编辑的网页上.
我对jQuery解决方案持开放态度,并发现这个插件似乎简化了跨浏览器创建范围的能力,但我无法使用它来将任何格式应用于所选范围.我可以从控制台看到它正在接受选择,但使用类似的东西:
var selected = $().selectedText();
$(selected).css("background-color","yellow");
Run Code Online (Sandbox Code Playgroud)
没有效果.
任何指导我正确方向的帮助将不胜感激.
javascript ×4
range ×2
dom ×1
getselection ×1
highlight ×1
html ×1
jquery ×1
position ×1
selection ×1
text ×1