layui文本域怎么实现拖拽文字放入区域-Layui教程-PHP中文网

layui的textarea本身不支持拖拽文字放入，因其为原生控件且未接管drag/drop事件；需手动监听dragover、drop事件并阻止默认行为，通过filereader读取拖入的文本文件内容后赋值给value。

layui文本域怎么实现拖拽文字放入区域

layui文本域本身不支持拖拽文字放入

layui 的 textarea 是原生表单控件，没有内置 drag/drop 接口；所谓“拖拽文字放入”，实际是浏览器原生的 dragstart/drop 行为，和 layui 无关——它只负责样式渲染，不接管事件逻辑。

常见误解是以为给 textarea 加 draggable="true" 就能拖入文字，但这是无效的：textarea 不接受外部 drop，也不能作为 drag target（除非手动阻止默认行为并监听 drop）。

拖拽文字到 textarea 上，默认会触发浏览器插入光标位置，但仅限于「已选中文本」拖拽（比如从网页其他地方选中一段字再拖），不是任意文件或富文本
若想拖入文件（如 .txt），必须监听 drop 事件、读取 event.dataTransfer.files，再用 FileReader 解析内容
若想拖入富文本（如 HTML 片段），需监听 drop 并调用 event.preventDefault() + event.dataTransfer.getData('text/html') 提取

如何让 layui-textarea 接收拖入的文本文件

关键不是改 layui，而是给 .layui-textarea 容器加事件监听，并处理文件读取。注意：layui 渲染后 DOM 已存在，直接绑定即可。

必须在 table.render() 的 done 回调、或 layer.open() 的 success 回调里绑定，确保元素已挂载
drop 事件要 event.preventDefault()，否则浏览器会尝试导航跳转或打开文件
只处理第一个文件：const file = e.dataTransfer.files[0]，避免多文件混乱
用 FileReader.readAsText(file, 'utf-8') 读取，回调中赋值给 textarea.value
别忘了同时监听 dragover 并 preventDefault，否则 drop 不会触发

示例片段：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

$('.layui-textarea').on('dragover drop', function(e) {
  e.preventDefault();
  if (e.type === 'drop') {
    const file = e.originalEvent.dataTransfer.files[0];
    if (file && file.type === 'text/plain') {
      const reader = new FileReader();
      reader.onload = () => $(this).val(reader.result);
      reader.readAsText(file, 'utf-8');
    }
  }
});