Многоцветное выделение текста в текстовом поле или текстовом вводе

Я хотел бы установить текст в текстовом поле или текстовом вводе, используя разные цвета (то или другое отлично, мне не нужны оба). Подумайте, что-то вроде простой подсветки синтаксиса. Итак, скажем, у меня есть определенные ключевые слова. Я хотел бы, чтобы эти слова были окрашены в другой цвет, поскольку пользователь вводит текст в текстовое поле или текстовый ввод

Я понимаю, что это должна быть какая-то комбинация CSS, Javascript и, возможно, пылишки. Я задаюсь вопросом, в каком направлении мне нужно вникать, чтобы узнать, как это можно сделать.

Спасибо

Ответ 1

Нет, вы не можете сделать это в текстовом поле или текстовом вводе. Любое текстовое свойство CSS влияет на весь текст в текстовом поле/входе. Для достижения подсветки синтаксиса вам понадобится редактируемый элемент или документ. Пример (работает во всех последних браузерах, последним крупным браузером, не поддерживающим contenteditable, был Firefox 2.0):

<code contenteditable="true">
    <span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</code>

Ответ 2

Вы находите это?

Использовать jQuery.colorfy

код: https://github.com/cheunghy/jquery.colorfy

Демо: http://cheunghy.github.io/jquery.colorfy/

Screencast: https://www.youtube.com/watch?v=b1Lu_qKrLZ0

Ответ 3

Это можно сделать, используя стиль внутри тега, это ссылка с одного из моих сайтов, где я сделал это

<input style="border-radius: 5px; background-color: #000000; color: #ff0000; border-color:
 blue;" class="form-control" name="firstname" placeholder="What you were looking for?"
 type="text"
 required autofocus />

Ответ 4

вы можете просто сделать тег SPAN для выбора некоторой части текста, например:

Some <span style="color:#FF3333">text</span> here

В результате текст слова будет выглядеть красным.