JavaScript получает данные буфера обмена по событию вставки (Перекрестный браузер)
Как веб-приложение может обнаружить событие вставки и получить данные, которые будут вставляться?
Я хотел бы удалить содержимое HTML, прежде чем текст будет вставлен в визуальный редактор.
Очистка текста, будучи вставленным впоследствии работает, но проблема состоит в том, что все предыдущее форматирование потеряно. Например, я могу записать предложение в редакторе и сделать его полужирным, но когда я вставляю новый текст, все форматирование потеряно. Я хочу убрать просто текст, который вставляется, и оставьте любое предыдущее форматирование нетронутым.
Идеально, решение должно работать через все современные браузеры (например, MSIE, Геккон, Chrome и Safari).
Обратите внимание, что MSIE имеет clipboardData.getData(), но я не мог найти схожую функциональность для других браузеров.
2 ответа
Ситуация изменилась с момента написания этого ответа: теперь, когда Firefox добавил поддержку в версии 22, все основные браузеры теперь поддерживают доступ к данным буфера обмена в событии вставки . См. Пример Ответ Нико Бернса .
В прошлом это было невозможно в кросс-браузере. В идеале была бы возможность получить вставленный контент с помощью события paste , , что возможно в последних версиях браузеров , но не в некоторых старых браузерах (в частности, Firefox <22).
Когда вам нужна поддержка старых браузеров, то, что вы можете сделать, будет довольно сложным и небольшим взломом, который будет работать в браузерах Firefox 2+, IE 5.5+ и WebKit, таких как Safari или Chrome.Последние версии TinyMCE и CKEditor используют эту технику:
- Обнаружение события ctrl-v / shift-ins с помощью обработчика события нажатия клавиши
- В этом обработчике сохраните текущий выбор пользователя, добавьте элемент textarea вне экрана ( скажем слева -1000 пикселей), выключите
designModeи вызовитеfocus ()в текстовой области, таким образом перемещая курсор и эффективно перенаправляя вставку. - Установите очень короткое таймер (скажем, 1 миллисекунда) в обработчике событий для вызова другой функции, которая хранит значение текстового поля, удаляет текстовое поле из документа, снова включает
designMode, восстанавливает выбор пользователя и вставляет текст.
Обратите внимание, что это будет работать только для событий вставки с клавиатуры, но не для вставок из контекстного меню или меню редактирования. К тому времени, когда срабатывает событие вставки, уже слишком поздно перенаправлять курсор в текстовое поле (по крайней мере, в некоторых браузерах).
В том маловероятном случае, когда вам понадобится поддержка Firefox 2, обратите внимание, что вам нужно будет разместить текстовое поле в родительском документе, а не в документе iframe редактора WYSIWYG в этом браузере.
Во-первых, что приходит к уму, это пастых закрытия Google Lib http://closure-library.googlecode.com/svn/trunk/Cloady/goog/demos/pastehnler.html