Question

我有contenteditable=true div，用户输入他的反馈，我想允许他在用户点击颜色选择时更改用div编写的所选文本的文本颜色。

我有完整的代码来完成使用用户所需颜色更改所选文本颜色的任务。但... 可以选择页面上的其他内容并更改其颜色，我想阻止它。我想只允许改变颜色=＆＃34;评论＆＃34;。

使用以下代码，我们无法理解如何做到这一点。

if (window.getSelection) { // all browsers, except IE before version 9 var selectionRange = window.getSelection (); if (selectionRange.isCollapsed) { alert ("Please select some content first!"); } else { //do the stuff } }

感谢您的帮助

Answer 1

更新：包括突出显示功能

这是jsFiddle：DEMO

$("#highlight").click(function(){
    var flag = 0;
    sel = window.getSelection();
    for (var i = 0; i < sel.rangeCount; i++) {
        var $sNode = $(sel.getRangeAt(i).startContainer.parentNode);
        var $eNode = $(sel.getRangeAt(i).endContainer.parentNode);
        if ($sNode.prop("class") == "comment" && $eNode.prop("class") == "comment"){
            $sNode.html($sNode.html().replace(sel,"<span class='selectedText'>"+ sel + "</span>"));
        }
    }
});

仅会突出显示是否仅从comment类div中选择文本

window.getSelection（）仅在类中选择文本

1 个答案: