it-swarm.com.ru

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

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

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

Спасибо

20
oneself

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

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

44
Tim Down

Ты находишь это?

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

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

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

Снимок экрана: https://www.youtube.com/watch?v=b1Lu_qKrLZ0

1
Zhang Kai Yu

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

<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 />
0
Provision