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

Я работаю с полем <input>, и я хотел бы стилизовать часть поля, когда пользователь вводит другой цвет. Например, скажем, <input> имеет объявление стиля color: red;, и я хочу изменить его часть на color: blue;. Можно ли это сделать?

Если нет (как я подозреваю) любых творческих идей о том, как я могу имитировать этот эффект, сохраняя при этом смысловую надбавку?

Ответ 1

Ваши подозрения верны: стили будут применяться ко всему вводу только.

Поскольку стили могут применяться ко всему элементу только для решения, для решения потребуется по крайней мере один элемент для каждого требуемого цвета.

Рассмотрим разделение поля ввода относительно точки, в которой пользователь вносит изменения. Есть три раздела ввода:

до того момента, когда применяются изменения.
что после того, как применяются изменения,
что в момент внесения изменений

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

Сначала вы должны включить обычный элемент ввода и отказаться от любой требуемой раскраски. Используйте JavaScript для замены ввода подходящим элементом контейнера. Это можно стилизовать, чтобы имитировать входной элемент.

В случае возникновения изменений используйте JavaScript для идентификации вышеупомянутых трех разделов. Оберните их в подходящие элементы (пролеты будут идеальными) и цвет по мере необходимости.

Рассмотрим следующую отправную точку для сгенерированной замещающей разметки:

<div class="input">
  <span class="nonEdited before">foo</span>
  <span class="edited">fizz</span>
  <span class="nonEdited after">bar</span>
</div>

Используйте события click, keydown и keyup для определения трех разделов для ввода и применения, чтобы при необходимости обернуть три части поддельного входа.

Ответ 2

Как говорили другие, вы не можете делать это со стилями и статической разметкой.

Возможно, вы можете сделать это с помощью флэш-формы.

Но если бы мне пришлось это сделать, я бы использовал jQuery для наложения divs с раскрашенным текстом поверх <input>.

Алгоритм:

Используйте обычный <input> с любыми желаемыми стилями по умолчанию. Содержимое этого ввода никогда не изменится, кроме как с помощью действия пользователя.
jQuery отслеживает, что <input>. Когда он обнаруживает триггерное слово (-ы), он добавляет <div> после ввода и заполняет его триггерным словом (-ами) - стилируется по желанию. Вероятно, один <div> за слово или фразу лучше.
jQuery затем позиционирует новый <div>, абсолютно, непосредственно над триггерным словом. s Получение смещения триггера (-ов) в пределах <input> может даже не понадобиться, потому что предыдущие слова также могут быть в наложении <div> - либо в стиле по умолчанию, либо в visibility: hidden.
Но, если в оверлее желательно только триггерное слово (ы), то использование подстроки с фиксированной шириной, например Courier, поможет с подпозиционированием.
Позаботьтесь о том, чтобы оверлей не мешал пользователю, пытающемуся навести мышью или клавишей на определенные части <input>. IE, вероятно, не хочет больше охватывать <input>, чем необходимо, и установить обработчик click() для ретрансляции фокуса.

Альтернативный, удобный и простой подход:

Вместо того, чтобы пытаться делать фанки, не-ожидаемые пользователем вещи на вкладке, возьмите страницу от Якоба Нильсена и от таких сайтов, как StackOverflow.

Просто получим простой ol '<input>, но под ним покажите отформатированный текст, как он есть.

Ответ 3

Возможно, вы сможете сделать это с некоторым редактированием на месте javascript (если это невозможно в чистом html/css):

http://www.appelsiini.net/projects/jeditable/default.html

Этот плагин jQuery не использует поля ввода html, поэтому можно было бы создавать разные части ввода. Он имеет пару крючков для обратных вызовов, которые можно использовать для стилизации ввода. Надеюсь, что это помогает как идея.

Ответ 4

Вы можете добиться этого с помощью (большого количества усилий) и div с атрибутом contentEditable. Таким образом, большинство редакторов WYSIWYG в Интернете получают богатое форматирование входных данных. См. Здесь для получения дополнительной информации: http://ajaxian.com/archives/on-browser-wysiwyg

Ответ 5

В контейнере, который перекрывается прозрачным входом, вы можете держать разные стили div друг с другом. Измените ширину стилизованных divs на основе ввода ввода.

Например, для цветного входного фона для начального и конечного пробелов:

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

Три div внутри контейнера изменят свою ширину с изменением ввода.

Проверьте рабочий пример в jsfiddle http://jsfiddle.net/TalhaAwan/ywyw4qq5/