Обнаружить событие вставки в contenteditable - PullRequest
27 голосов
/ 19 ноября 2011

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

Я также не хочу терять фокус после завершения операции вставки + очистки.

1 Ответ

22 голосов
/ 19 ноября 2011

ОБНОВЛЕНИЕ:

Все основные браузеры теперь предоставляют вам доступ к данным буфера обмена в событии вставки.См. ответ Нико Бернса для примера на более новом браузере, а также посмотрите ответ Тима Дауна , если вам нужна поддержка старых браузеров.


Вы можете прослушатьсобытие onPaste в div для обнаружения вставки.Если вы просто хотите отключить вставку, вы можете вызвать event.preventDefault() из этого прослушивателя.

Однако захватить вставленное содержимое немного сложнее, поскольку событие onPaste не дает вам доступа к вставленному.содержание.Обычный способ справиться с этим - сделать следующее из обработчика событий onPaste:

  • создать фиктивный div и поместить его за границы окна, чтобы он не был виден посетителям
  • переместите фокус на этот div
  • вызовите метод дезинфекции, используя setTimeout(sanitize, 0)

и из вашего метода дезинфекции:

  • найдите фиктивный divи получить его содержимое
  • очистить HTML и удалить div
  • переместить фокус обратно на исходный div
  • вставить обработанный контент в исходный div
...