如何访问拖动的文本(或:如何将文本拖动到输入“工作”中?)

How to Access Dragged Text (Or: How Does Dragging Text into an Input "Work"?)

本文关键字：文本 拖动 工作 输入 访问 何访问      更新时间：2023-09-26

从我目前所看到的来看，我们可以使用onPaste事件来验证/阻止内容粘贴到<input>字段中。同样地，如果我们想要验证/阻止按键，我们可以使用onkeydown事件。我对ondrag和ondrop很好奇。

具体来说，我们如何检索用户将拖放到文本<input>中的内容?如果我们想要获取整个更新后的输入，我们可以使用onchange或onblur事件。然而，我很好奇如何抓取只是拖动的文本-类似于我们如何使用event.which抓取只是按下的键。

文本数据存储在event某处的ondrag或ondrop -它是在一种格式，我们可以检索它吗?

我一直在探索Dottoro文档(拖放)，没有运气

在更多的窥探之后，我在Dottoro上发现了一个JavaScript示例，它把我带进了兔子洞。

快速回答

文本可以抓取与 event.dataTransfer.getData("Text") 假设浏览器支持数据传输对象。还有其他限制-例如Webkit问题，getData总是在dragstart或dragover(源)上为空。(小提琴)

同样，可以使用 event.dataTransfer.setData("Text", newText) 对拖动的文本进行修改。(小提琴)

在上面的两个示例中，"Text"是我们正在检索/修改的拖动内容的format。MDN文档中列出了许多选项，但请注意，给定"拖动"的可用格式可以在events.dataTransferTypes数组中找到。

详细信息和上下文

下面的代码解释了如何使用datattransfer对象和一些特性:

//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>)上。

相关文章：