Как я могу иметь разные цвета шрифта в текстовой области?

Question

Я хочу, чтобы цвет шрифта изменялся в текстовой области при вводе определенных ключевых слов, как в Visual Studio.

Я нигде этого не видел, поэтому не знаю, возможно ли это с HTML и JavaScript.

Кто-нибудь видел что-нибудь подобное? Или знаете как это написать?

Answer 1

Textarea - это стандартный HTML-элемент, поэтому он был изобретен сразу же на заре времени. К сожалению, это означает, что он ограничен по внешнему виду и функциональности.

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

Yahoo RTE , FCKEditor и Легкий RTE работают таким образом.

Еще одна опция, которая не использует iFrame, - это редактор, используемый здесь при переполнении стека, известный как WMD. Файлы здесь .

Answer 2

Это невозможно.

Путь состоит в том, чтобы сделать шрифт textarea прозрачным с использованием color:#000;-webkit-text-fill-color:transparent, а не курсора, а затем создать базовое 100% перекрытие div, в которое будет скопировано + отформатировано содержимое textarea + отформатировано в событии oninput textarea. .

Вам необходимо решить (или избежать) некоторые проблемы, возникающие при синхронизации этих двух элементов, например, прокрутку, но это можно сделать. Я сделал свой собственный редактор HTML таким образом.

AFAIK, свойство css -webkit-text-fil-color поддерживается в Opera, Chrome и должно быть в скором выпуске Firefox v.48.

Answer 3

Возможно, вам придется запустить javascript на клиенте, чтобы определить, когда текст меняется, а затем заменить текст, который будет выделен, на некоторые дочерние элементы html с соответствующим стилем.

Например

Оригинальный текст:

This is what the user typed.

выделенный текст

This is what the <a class="className">user</a> typed.