Как выделять текст в кавычках, в input?

Question

[Сергей Минаков]

У меня есть input ( < input type="text" name="alsearch" class="alsearch" > ). И при написании текста в кавычках, его нужно выделять серым цветом (включая кавычки).

Текст за кавычками "текст внутри кавычек" текст после кавычек

Текст выделенный жирным должен становиться серым в реальном времени.

Comments

[Dark Hole]

С помощью input такого добиться невозможно.

Answer 1

[Anton fon Faust]

Вам нужно сделать элемент, который будет имитировать инпут.
Как вариант:
1) Делаете инпут прозрачным (чтобы он был кликабельным и не терял фокус).
2) Делаете под ним ваш элемент, который будет отображать введенные данные
3) Вешаете обработчик событий keyup/keydown/change, чтобы по событию перерисовывался ваш элемент снизу.

https://jsfiddle.net/anton4ept/1r9sLhg9/ - как-то так, например.
Ну, а дальше уже вместо просто innerHTML делаете нужные замены и присвоения классов.