Может ли DIV заменить TextArea - PullRequest
Новая
       5

Может ли DIV заменить TextArea

0 голосов
/ 08 марта 2012

Как мы знаем, можно установить contenteditable в DIV, чтобы разрешить редактирование. Это может сделать то же самое, что и Textarea.

Однако наиболее существенными являются «копирование и вставка контента» в DIV и Textarea.

DIV - это html / plain, но Textarea обслуживает только обычный текст.

Ниже приведен метод решения этих проблем: - 

Method 1 - Direct using window.clipboardData.getData('Text') ( will prompt for asking permission).

Проблема: Mozilla и Chrome не поддерживают данные буфера обмена.

Метод 2 - Использование вспышки.

Проблема: Flash v.10 обновлен до новых правил, которые не могут получить данные буфера обмена без предварительной инициализации пользователя.

Метод 3 - Использование события «onpaste». Когда данные вставляются в div -> Установить фокус на скрытой текстовой области -> Получить значение из скрытой текстовой области и установить в div используя setTimeout -> очистить скрытую текстовую область.

Проблема: значение синхронизации для скрытой текстовой области не соответствует.

Я видел, что у Google все хорошо.

Для IE используйте clipboarddata.

Для Mozilla, другие (не поддерживают html5) - Кто-нибудь знает, как это сделал гугл?

Подсказка: использовать режим разработки iframe?

Для Chrome (поддержка html5) - просто установите для DIV значение Contenteditable = "только для открытого текста".

1 Ответ

1 голос
/ 08 марта 2012

Уловка, которую я использую для такого рода вещей, заключается в том, чтобы иметь <textarea> за кадром, который не виден пользователю.

Текстовое поле сфокусировано и имеет обработчик клавиатуры, который замечает, печатает ли пользователь текстовое поле.Обнаружив, что пользователь печатает, я беру значение текстовой области и помещаю его в div.

Это основная идея.Вам понадобится немного больше, чтобы получить правильный внешний вид:

  1. Вы не можете просто скрыть текстовое поле с отображением: нет или видимость: скрыто, потому что это обычно делает его нечувствительным к печатанию исобытия тоже.Поэтому вам нужно сделать его действительно маленьким и расположить его за пределами экрана, или расположить его позади какого-либо другого элемента.
  2. Вам нужно будет определить, стирается ли текстовая область, и решить, нужно ли перефокусировать его.
  3. Вам понадобится обработчик щелчков на div, чтобы, если люди нажимают на div, вы могли вместо этого сосредоточиться на текстовой области, чтобы люди могли снова начать печатать.

Приятная вещь оэтот подход заключается в том, что общая обработка клавиатуры, например ctrl + курсор, вырезание + вставка и т. д., работают точно так, как ожидается, без необходимости кодировать их самостоятельно - вы просто используете существующие функции текстовой области.

Вот пример того, как это работает:

http://js1k.com/2012-love/demo/1168

(оболочка javascript)

...