Вопросы Теги

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

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

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

33
задан Josh Leitzel 25 June 2010 в 21:50
поделиться

4 ответа

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

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

Рассмотрите разделение поля ввода по отношению к точке, в которой пользователь вносит изменения. Входные данные состоят из трех частей:

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

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

13
ответ дан 27 November 2019 в 19:32
поделиться

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

3
ответ дан 27 November 2019 в 19:32
поделиться

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

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

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

1
ответ дан 27 November 2019 в 19:32
поделиться

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

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

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

Алгоритм:

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

  2. jQuery отслеживает, что . Когда он обнаруживает триггерное слово (слова), он добавляет

    после ввода и заполняет его триггерным словом (ями) с желаемым стилем. Вероятно, лучше всего один
    на слово или фразу.

  3. jQuery затем позиционирует новый

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

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

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

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

Просто используйте простой ol ' , но под ним показывайте форматированный текст по мере его поступления.

5
ответ дан 27 November 2019 в 19:32
поделиться