есть ли способ стилизовать часть значения поля ввода?

<p>я работаю с полем <code><input></code>, и я хотел бы стилизовать часть поля, когда пользователь печатает другим цветом. например, скажем, у <code><input></code> есть объявление стиля <code>color: red;</code>, и я хочу изменить<em> part </em>его на <code>color: blue;</code>. есть ли способ, которым это возможно?</p><p>если нет (как я подозреваю), есть какие-нибудь креативные идеи о том, как я могу имитировать этот эффект, сохраняя при этом семантическую разметку?</p>

<p>как уже говорили другие, вы не можете сделать это со стилями и статической разметкой.</p><p>возможно, вы могли бы сделать это с помощью формы на основе flash.</p><p>но если бы мне пришлось это сделать, я бы использовал jquery для наложения div-ов с цветным текстом поверх <code><input></code>.</p><p><strong> алгоритм: </strong></p><ol> <li><p>используйте обычный <code><input></code> со всеми желаемыми стилями по умолчанию. содержимое этого ввода никогда не изменится, за исключением действий пользователя.</p></li> <li><p>jquery контролирует этот <code><input></code>. когда он обнаруживает слово (слова) триггера, он добавляет <code><div></code> после ввода и заполняет его словом (ами) триггера - в соответствии с желанием. вероятно, один <code><div></code> на слово или фразу лучше.</p></li> <li><p>затем jquery размещает новый <code><div></code>, непосредственно, над триггером word.<br> получение смещения триггера word (s) в <code><input></code> может даже не потребоваться, поскольку предыдущие слова также могут быть в оверлее <code><div></code> - либо с стилем по умолчанию, либо с <code>visibility: hidden</code>.<br> но если в оверлее требуются только триггерные слова, тогда использование шрифта с фиксированной шириной, такого как courier, поможет с позиционированием.</p></li> <li><p>позаботьтесь о том, чтобы наложение не мешало пользователю, пытающемуся навести курсор мыши или нажать клавишу на определенных частях <code><input></code>. ie, вероятно, не хочет покрывать больше <code><input></code>, чем необходимо, и устанавливает обработчик click () для переключения фокуса.</p></li> </ol><hr><h2>альтернативный, удобный и простой подход:</h2><p>вместо того, чтобы пытаться сделать что-то неожиданное и непредвиденное для входных данных, возьмите страницу у якоба нильсена и с таких сайтов, как stackoverflow.</p><p>просто укажите старый <code><input></code>, но под ним покажите отформатированный текст, как только он появится. </p>

<p>вы можете хранить разные стили div'ов рядом друг с другом в контейнере, перекрытом прозрачным вводом. измените ширину стилей div в зависимости от введенной вами записи.</p><p>например, чтобы закрасить фон ввода для начальных и конечных пробелов:</p><pre><code><div class="bckg-container"> <div id="bckg-leading" class="bckg spaces"> </div> <div id="bckg-middle" class="bckg"> </div> <div id="bckg-trailing" class="bckg spaces"> </div> <br style="clear: left;" /> </div> <input id="inpt" type="text" placeholder="add leading/trailing spaces" maxlength="20" /> </code></pre><p>три элемента внутри контейнера изменят свою ширину при изменении ввода. </p><p>проверьте рабочий пример в jsfiddle <a href="http://jsfiddle.net/talhaawan/ywyw4qq5/">http://jsfiddle.net/talhaawan/ywyw4qq5/</a> </p>

<p>вы можете достичь этого с помощью (больших усилий и) div с существующим атрибутом contenteditable. вот как большинство веб-редакторов wysiwyg достигают богатого форматирования входных данных. смотрите здесь для получения дополнительной информации: <a href="http://ajaxian.com/archives/on-browser-wysiwyg">http://ajaxian.com/archives/on-browser-wysiwyg</a> </p>

<p>у вас может быть метка, имитирующая этот вход, и реальный вход, который нужно скрыть, а затем вы можете сделать множество вещей, включая метки меток (например, цветные участки).</p>