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

Как мы знаем, можно установить 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) - Кто-нибудь знает, как это сделал Google?

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

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


javascript html plaintext
person user717166    schedule 08.03.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

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

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

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

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

(Оболочка javascript)

person Roland Bouman    schedule 08.03.2012
comment
Спасибо за помощь! Но это кажется не таким последовательным. Вы хоть представляете, как работает google +? - person user717166; 08.03.2012
comment
Для chome (и, вероятно, сафари тоже) этот CSS, кажется, помогает: div [contenteditable = plaintext-only] {-webkit-user-modify: read-write-plaintext-only; перенос слов: слово-пауза; -webkit-nbsp-mode: пробел; -webkit-разрыв строки: после-пробела; } для firefox, я считаю, что они используют технику, аналогичную той, что я описал, за исключением того, что они, похоже, используют iframe для обнаружения нажатий клавиш. - person Roland Bouman; 08.03.2012
comment
Я тестировал. Мы не можем использовать функцию вставки в меню. Однако у Google + нет проблем по этому поводу. - person user717166; 09.03.2012
comment
Приносим извинения за проблемы. Google также сталкивается с той же проблемой при использовании вставки меню. - person user717166; 09.03.2012
comment
Оболочка loveshell - это полный рабочий образец, но код был адаптирован для размера 1 КБ, поэтому вам придется немного поработать над его расшифровкой. Действительно, вставка меню не работает - даже не думал об этом. Однако вставка Ctrl + V работает. Я полагаю, что можно было бы реализовать вставку меню, если вы хотите написать меню самостоятельно. - person Roland Bouman; 09.03.2012