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

Question

Как известно, в DIV можно установить контент, разрешающий редактирование. Он может делать то же самое, что и Textarea.

Однако самые большие отличия - это «копирование и вставка содержимого» в DIV и Textarea.

DIV разрешает html/plain, но Textarea служит только для обычного текста.

Ниже способ решить эти проблемы: -

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

Проблема: Mozilla и хром не поддерживают clipboarddata.

Способ 2 - Использование вспышки.

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

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

Проблема: значение времени установки тайного текстового поля несовместимо.

Я видел, что Google хорошо справлялся с этим.

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

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

Подсказка: использовать iframe designmode?

Для Chrome (поддержка html5) - просто установите DIV в Contenteditable = "plaintext-only".

Answer 1

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

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

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

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

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

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

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

(A Javascript оболочка)