是否可以将文件拖放到标准 html 文本区域中？

Question

我想知道是否可以将拖放文件添加到标准 HTML 标签 <textarea> 并且同时它也具有写入功能？类似Whosebug textarea

Answer 1

如果您使用的是HTML5，您可以按如下方式拖放文本内容：

CSS:

#tadrop{
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}

Javascript:

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.value = document.getElementById(data).innerHTML;
  //jQuery: ev.target.value = $('#'+data).text();
}

HTML:

<p>Drag SOME TEXT into the rectangle:</p>

<textarea id="tadrop" ondrop="drop(event)" ondragover="allowDrop(event)"></textarea>

<p id="drag1" draggable="true" ondragstart="drag(event)">SOME TEXT</p>

这里是 fiddle：text drag and drop to textarea。

是否可以将文件拖放到标准 html 文本区域中？

Is possible drag drop files into standard html textarea?

html

jquery

textarea

drag-and-drop