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

Question

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

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

Answer 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, чтобы выяснить три деления для ввода и применить обтекание трех частей поддельного ввода, как требуется.

Answer 2

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

Возможно, вы могли бы сделать это с помощью формы на основе Flash.

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

Алгоритм:

1. Используйте обычный <input> со всеми желаемыми стилями по умолчанию. Содержимое этого ввода никогда не изменится, за исключением действий пользователя.

2. jQuery контролирует, что <input>. Когда он обнаруживает триггерное слово (слова), он добавляет <div> после ввода и заполняет его триггерным словом (словами), стилизованными по желанию. Вероятно, лучше всего один <div> на слово или фразу.

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

4. Позаботьтесь о том, чтобы наложение не мешало пользователю, пытающемуся навести указатель мыши или нажать клавишу на определенных частях <input>. IE, вероятно, не хочет покрывать <input> больше, чем необходимо, и устанавливает обработчик click () для переключения фокуса.

---

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

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

Просто наберите "простой старый" <input>, но под ним покажите отформатированный текст по мере его поступления.

Answer 3

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

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

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

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

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

Answer 4

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

Answer 5

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

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

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

Answer 6

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