it-swarm.com.ru

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

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

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

30
Josh Leitzel

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

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

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

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

Вы не можете достичь этого с помощью одного элемента ввода. И поскольку точка, в которой применяются изменения, может измениться, части «входных данных», обернутые этими тремя элементами, также изменятся. 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, чтобы выяснить три деления для ввода и применить обтекание трех частей фальшивого ввода, как требуется.

11
Jon Cram

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

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

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

Алгоритм:

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

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

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

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


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

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

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

5
Brock Adams

Вы можете хранить разные стили 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/

3
Talha Awan

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

3
Mike Sherov

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

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

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

1
Mark Pope

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

0
Botea Florin