如果选择了文本，然后单击了下拉选项，则更改所选文本的颜色

Question

I want to make a text editor, and when you select some text in the text area, then click an option from the drop down, the selected text from the text area changes color. Unfortunately I don't know how to do this because when I try to access the drop down, the selection from the text area disappears.

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);
  } 
}   

Answer 1

The problem is when you click the select element it steals focus from textarea. You have to give back the focus to textarea element, here is a working example (at least in chrome):

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

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

Answer 2

I've been playing around with trying to change color of highlighted content within the textarea, but it seems that you cannot change the color of text within a textarea. An alternative, as has been suggested before, is to create an editable div that acts as a rich textbox. You can set the contentEditable property on the div to true in order for this to work. Here is my jsfiddle if you want to play around with it.

And here is my JS code. I changed a couple things on the HTML too so check out the jsfiddle for the full code.

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(); };