Многоцветное выделение текста в текстовой области или ввод текста

Question

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

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

Спасибо

Answer 1

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

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

Answer 2

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

Используйте jQuery.colorfy

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

Демонстрация: http://cheunghy.github.io/jquery.colorfy/

Скриншот: https://www.youtube.com/watch?v=b1Lu_qKrLZ0

Answer 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 />

Answer 4

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

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

Который заставит текст слова выглядеть красным