时间戳

首页 > 解决方案 > 是否可以将文件拖放到标准 html textarea 中？

html - 是否可以将文件拖放到标准 html textarea 中？

问题描述

我想知道是否可以将拖放文件添加到标准 HTML 标记<textarea>，同时它也有写入功能？类似的stackoverflow textarea

标签： htmljquerydrag-and-droptextarea

解决方案

如果您使用的是 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>

这是小提琴：文本拖放到textarea.

推荐阅读