Javascript突出显示所选范围按钮 [英] Javascript Highlight Selected Range Button
问题描述
我正在尝试为页面创建一个学习工具,允许用户选择页面上的任何文本并单击按钮。然后,此单击将使用黄色背景格式化所选文本。我可以在单个标签内部进行此工作,但如果选择范围跨越多个标签(例如,无序列表中的第一个LI以及第二个的一半),我将难以应用该样式。不幸的是,我不能在这里用一个跨度包装选择。
I'm attempting to create a study tool for a page that allows a user to select any text on the page and click a button. This click then formats the selected text with a yellow background. I can make this work inside of a single tag, but if the range of selection is across multiple tags (for instance, the first LI in an unordered list along with half of the second), I have difficulty applying the style. I can't just wrap the selection with a span here unfortunately.
基本上,我想要与 contentEditable相关联的效果
和 execCommand
而不实际在页面上进行任何可编辑的操作,只需单击按钮即可将背景颜色应用于所选文本。
Basically, I want the effects associated with contentEditable
and execCommand
without actually making anything editable on the page except to apply a background color to the selected text with the click of a button.
我对jQuery解决方案持开放态度,发现此插件似乎简化了跨浏览器创建范围的能力,但我无法使用它将任何格式应用于所选范围。我可以从控制台看到它正在接受选择,但使用类似的东西:
I'm open to jQuery solutions, and found this plug-in that seems to simplify the ability to create ranges across browsers, but I was unable to use it to apply any formatting to the selected range. I can see from the console that it's picking up on the selection, but using something like:
var selected = $().selectedText();
$(selected).css("background-color","yellow");
无效。
任何帮助非常感谢我指向正确的方向。
Any help pointing me in the right direction would be greatly appreciated.
推荐答案
以下应该做你想要的。在非IE浏览器中,它打开 designMode
,应用背景颜色,然后再次关闭 designMode
。
The following should do what you want. In non-IE browsers it turns on designMode
, applies a background colour and then switches designMode
off again.
更新
已修复在IE 9中工作。
Fixed to work in IE 9.
function makeEditableAndHighlight(colour) {
sel = window.getSelection();
if (sel.rangeCount && sel.getRangeAt) {
range = sel.getRangeAt(0);
}
document.designMode = "on";
if (range) {
sel.removeAllRanges();
sel.addRange(range);
}
// Use HiliteColor since some browsers apply BackColor to the whole block
if (!document.execCommand("HiliteColor", false, colour)) {
document.execCommand("BackColor", false, colour);
}
document.designMode = "off";
}
function highlight(colour) {
var range, sel;
if (window.getSelection) {
// IE9 and non-IE
try {
if (!document.execCommand("BackColor", false, colour)) {
makeEditableAndHighlight(colour);
}
} catch (ex) {
makeEditableAndHighlight(colour)
}
} else if (document.selection && document.selection.createRange) {
// IE <= 8 case
range = document.selection.createRange();
range.execCommand("BackColor", false, colour);
}
}
这篇关于Javascript突出显示所选范围按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!