Как получить доступ к перетаскиваемому тексту (или: как перетаскивание текста во вход "Работа"?)

91
9

Из того, что я видел до сих пор, мы можем использовать событие onPaste для проверки/предотвращения содержимого, вставленного в поле <input>. Аналогичным образом, если мы хотим проверить/предотвратить нажатие клавиши, мы можем использовать событие onkeydown. Мне любопытно о ondrag и ondrop.

В частности, как мы можем получить содержимое, которое пользователь перетаскивает в текст <input>? Если бы мы хотели захватить весь обновленный ввод, мы могли бы просто использовать события onchange или onblur. Тем не менее, мне любопытно захватывать только перетаскиваемый текст - так же, как мы можем использовать event.which для захвата только нажатой клавиши.

ondrag ли текстовые данные, хранящиеся в event где-то для ondrag или ondrop - и это в формате, который мы можем получить?

Я изучаю документы Dottoro (перетащить/падение), не повез.

спросил(а) 2021-01-19T18:16:21+03:00 9 месяцев назад
1
Решение
80

После некоторого слежения я нашел пример JavaScript на Дотторо, который привел меня к кроличьей дыре.

Быстрый ответ

Текст может быть захвачен event.dataTransfer.getData("Text") предполагая, что браузер поддерживает объекты dataTransfer. Существуют и другие ограничения, такие как проблема Webkit, где getData всегда пуст в dragstart или dragover (source). ( Fiddle)

Аналогично, перетаскиваемый текст можно изменить, используя event.dataTransfer.setData("Text", newText). ( Fiddle)

В обоих примерах выше "Текст" - это format перетаскиваемого контента, который мы извлекаем/изменяем. В документации MDN есть много вариантов, но обратите внимание, что доступные форматы для данного "перетаскивания" можно найти в массиве events.dataTransferTypes.

Детали и контекст

В следующем коде объясняется, как использовать объект dataTransfer и некоторые особенности:

//Modify the text when some specific text is dragged.
function changeDraggedText(event) {
if (event.dataTransfer) {
// Note: textData is empty here for Safari and Google Chrome :(
var textData = event.dataTransfer.getData("Text");
var newText = "..." //Modify the data being dragged BEFORE it is dropped.
event.dataTransfer.setData (format, newText);
}
}

//Access the text when the 'drag' ends.
function getDraggedText(event) {
if (event.dataTransfer) {
var format = "Text";
var textData = event.dataTransfer.getData (format);
if (!textData) {
// ... There is no text being dragged.
} else {
// ... Do what you will with the textData.
}
} else {
// ... Some (less modern) browsers don't support dataTransfer objects.
}

// Use stopPropagation and cancelBubble to prevent the browser
// from performing the default 'drop' action for this element.
if (event.stopPropagation) {
event.stopPropagation ();
} else {
event.cancelBubble = true;
}
return false;
}

Это может быть связано только с ondrop и ondragstart как в следующем HTML:

<div ondragstart="changeDraggedText(event)">
Dragging these contents causes the 'ondragstart' event to be fired.
</div>

<div ondragenter="return false;"
ondragover="return false;"
ondrop="getDraggedText(event);">
And likewise, the 'ondrop' event gets fired if I drop anything in here.
</div>

Предостережение: если вы не переопределяете события ondragover и ondragenter, они будут рассматривать перетаскивания, как обычно их обрабатывает браузер; это означает, что вы не можете отбрасывать текст на блок без ввода (например, <div>).

ответил(а) 2021-01-19T18:16:21+03:00 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема