Возможно ли иметь несколько разных цветных текстов в одном текстовом поле?

Я хотел бы несколько слов/фаз в текстовом поле появляться в разных цветах... Как мне это сделать? Ниже приведен пример, я хотел бы, чтобы слово green отображалось зеленым и т.д. И т.д....

<textarea style="width: 100%; height: 100%; resize: none;">
Is it possible to have multiple colors in a textarea? 
How would i set certain phases or words to be different colors? 
"Green"
"Red"
"Blue"
</textarea>

Ответы

Ответ 1

Вы не можете сделать это внутри <textarea>, а не редактируемого. Похоже, вы после WYSIWYG editor, большинство из которых используют <iframe> для этого.

Для этого есть несколько вариантов JavaScript, чтобы назвать несколько:

Ответ 2

Я не думаю, что это возможно сделать с помощью textarea и html. То, что вам нужно, это поле Rich Text Box. Вы можете либо свернуть свой собственный, изменив iframe, либо использовать популярные из доступных

Другой вариант, который вы можете использовать, когда нацеливаете браузеры с поддержкой html5, - это атрибут contentEditable. Вы можете использовать его для создания текстового элемента управления

Ответ 3

Вы не можете сделать это с помощью textarea или тега ввода. Однако, как упоминал @naikus, вы можете использовать атрибут contenteditable. Это выглядит так:

<div id="mytxt" contenteditable="true">
   Hello, my name is <span style="color: blue;">Bob</span>
   and I have a friend name <span style="color: green;">Joe</span>.
</div>

<div id="mytxt" contenteditable="true">
       Hello, my name is <span style="color: blue;">Bob</span> and I have a friend name <span style="color: green;">Joe</span>.
    </div>

Ответ 4

Это невозможно в обычном текстовом поле.

Для подходов с подсветкой синтаксиса см. ответы на этот вопрос.
Для более сложного, полноценного решения WYSIWYG, которое может делать цвета, а также другое форматирование, изображения и т.д., см. редактор WYSIWYG, например CKEditor.

Ответ 5

Вы не можете сделать это с помощью стандартных элементов управления html. Вы можете использовать редакторов Rich Text Box, чтобы получить то, что хотите, например, проверьте этот вопрос:

Каков наилучший редактор textarea для jQuery?

Ответ 6

Это невозможно с текущими спецификациями w3c. Если вы ищете обходной путь, отметьте codemirror или editArea для обходных решений для подсветки синтаксиса.

Ответ 7

вы можете использовать span

A <span> элемент, используемый для цветной части текста:

пример: <p>My mother has <span style="color:blue">blue</span> eyes.</p>

Определение и использование Тег <span> используется для группировки встроенных элементов в документе.

Тег <span> не дает визуального изменения сам по себе.

Тег <span> обеспечивает способ добавления привязки к части текста или части документа.