У меня есть сценарий, который изменяет цвет фона текста, который был выбран. Однако я встречаюсь с проблемой, когда текст выбран через несколько элементов/тегов.
Код, который я имею:
var text = window.getSelection().getRangeAt(0);
var colour = document.createElement("hlight");
colour.style.backgroundColor = "Yellow";
text.surroundContents(colour);
И ошибка, будучи произведенным:
Error: The boundary-points of a range does not meet specific requirements. =
NS_ERROR_DOM_RANGE_BAD_BOUNDARYPOINTS_ERR
Line: 7
Я полагаю, что это относится к getRange () функция, хотя я не слишком уверен, как продолжить двигаться, так как я - новичок в JavaScript.
Есть ли какой-либо другой способ, которым я могу копировать то, чего я пытаюсь достигнуть?
Большое спасибо.
Этот вопрос был задан сегодня: Как я могу выделить текст объекта DOM Range?
Вот мой ответ:
Следующее должно делать то, что вы хотите. В браузерах, отличных от IE, он включает designMode, применяет цвет фона, а затем снова отключает designMode.
ОБНОВЛЕНИЕ
Исправлено для работы в 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);
}
}