如果选择文本，并单击下拉选项，更改所选文本的颜色

我想创建一个文本编辑器，并且当您在文本区域中选择一些文本时，然后从下拉列表中选择一个选项，所选文本从文字区域改变颜色。不幸的是，我不知道该怎么做，因为当我尝试访问下拉菜单时，文本区域的选择消失了。如果选择文本，并单击下拉选项，更改所选文本的颜色

的jsfiddle :: http://jsfiddle.net/MatthewKosloski/a77sM/

function GetSelectedText() { 
    if (window.getSelection) { // all browsers, except IE before version 9 
     var range = window.getSelection(); 
     var selection = range.toString(); 
     alert(selection); 
    } 
}

来源

2013-07-18 Matthew

我一直在努力改变textarea的中突出显示的内容颜色玩耍，但看起来你不能改变textarea文本的颜色。如前所述，另一种方法是创建一个可编辑的div，充当丰富的文本框。您可以将div上的contentEditable属性设置为true，以使其工作。这是我的jsfiddle，如果你想玩它。

这里是我的JS代码。我也在HTML上更改了一些东西，所以请查看完整代码的jsfiddle。

function GetSelectedText (origtext, seltext, tcolor) { 
    //alert(origtext + ", " + seltext + ", " + tcolor); 
    var divcontent = document.getElementById('sec'); 
    var spanTag = document.createElement("span"); 
    var selIndex = origtext.indexOf(seltext); 
    var selLength = seltext.length; 

    //split the text to insert a span with a new color 
    var fpart = origtext.substr(0, selIndex); 
    var spart = origtext.substr(selIndex + selLength); 
    //alert(fpart + ", " + spart); 

    // add the text that was highlighted and set the color 
    spanTag.appendChild(document.createTextNode(seltext)); 
    spanTag.style.color = tcolor; 

    //remove all the children of the div 
    while(divcontent.hasChildNodes()){ 
     divcontent.removeChild(divcontent.lastChild); 
    } 

    //append the original text with the highlighted part 
    divcontent.appendChild(document.createTextNode(fpart)); 
    divcontent.appendChild(spanTag); 
    divcontent.appendChild(document.createTextNode(spart)); 
} 

// this function was found at http://stackoverflow.com/questions/275761/how-to-get-selected-text-from-textbox-control-with-javascript 

function getTextFieldSelection() { 
    var textComponent = document.getElementById('content'); 
    var selectElem = document.getElementById("myselect"); 

    var selectedText; 
    // IE version 
    if (document.selection != undefined) 
    { 
     textComponent.focus(); 
     var sel = document.selection.createRange(); 
     selectedText = sel.text; 
    } 
    // Mozilla version 
    else if (textComponent.selectionStart != undefined) 
    { 
     var startPos = textComponent.selectionStart; 
     var endPos = textComponent.selectionEnd; 
     selectedText = textComponent.value.substring(startPos, endPos) 
    } 
    //alert("You selected: " + selectedText); 
    selectElem.onchange = GetSelectedText(textComponent.value, selectedText,selectElem.options[selectElem.selectedIndex].text.toLowerCase()); 
} 

var content = document.getElementById("content"); 
var selectElem = document.getElementById("myselect"); 

selectElem.onfocus = function (e) { getTextFieldSelection(); };

来源

2013-07-18 19:43:32 nosegiant

的问题是，当你点击它偷焦点从textarea的选择元素。你必须给回焦点textarea元素，这里是一个工作示例（至少在铬）：

var color = document.getElementById("color"), // this is the select element 
    content = document.getElementById("content"); 

color.onfocus = function(){ content.focus(); };

来源

2013-07-18 17:23:08 user2585506

如果选择文本，并单击下拉选项，更改所选文本的颜色

回答

相关问题