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

If text is selected, and dropdown option is clicked, change color of selected text

本文关键字：文本 颜色 选择 单击 如果 选项      更新时间：2023-09-26

我想制作一个文本编辑器，当您在文本区域中选择一些文本，然后单击下拉菜单中的一个选项时，文本区域中所选的文本会更改颜色。不幸的是，我不知道如何做到这一点，因为当我试图访问下拉列表时，文本区域中的选择将消失。

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

我一直在尝试更改文本区域内高亮显示内容的颜色，但似乎无法更改文本区域中文本的颜色。正如前面所建议的，另一种选择是创建一个可编辑的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(); };

问题是，当您单击select元素时，它会从文本区域窃取焦点。您必须将焦点返回到textarea元素，这里有一个工作示例（至少在chrome中）：

var color   = document.getElementById("color"), // this is the select element
    content = document.getElementById("content");
color.onfocus = function (){ content.focus(); };
相关文章：