更改所选文本的颜色 Javascript

Question

我需要在单击按钮时更改文本区域中选定文本的文本颜色。

我的第一次尝试：

document.getSelectedText(document.getElementById('test22')).style.color = '#0F0';

我的第二次尝试：

document.getSelectedText((test22.value).substring(test22.selectionStart, test22.selectionEnd)).style.color = '#0F0';

HTML代码：

<textarea name="area1" cols="40" id="test22"></textarea>
<button onclick="test();">CLICK</button>

谢谢！ ;)

Answer 1

无法在 Textareas 中进行设置，因为它们不是 RTF 编辑器。

您可以将 contenteditable="true" 标签与 div 一起使用，并在那里施展魔法，就像在各处设置 "font" 标签一样。

您也可以使用 https://www.tinymce.com or http://ckeditor.com 之类的东西。两者都是WYSIWYG-Editors。或者在 github.

上搜索任何灯 RTF-Editor

也许你可以从中得到一些想法：http://dipaksblogonline.blogspot.in/2014/11/javascript-text-selection-popover.html

Answer 2

这是一个选项吗？

Demo - codepen.io

document.querySelector(".my-button").addEventListener("click", myFunction);

function myFunction() {
let elem = document.querySelector("#note_text");
  elem.classList.add("add-color");
  elem.focus();
}

#note_header::selection {
  color: red;
}

.add-color::selection {
  color: red;
}

<h3>Level - 1</h3>

<textarea id="note_header" rows="7" cols="70">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</textarea><br>

<h3>Level - 2</h3>

<textarea id="note_text" rows="7" cols="70">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</textarea><br>
<button class="my-button">CLICK</button>

更改所选文本的颜色 Javascript

Change color of a selected Text Javascript

javascript

textarea