layui的textarea本身不支持拖拽文字放入，因其为原生控件且未接管drag/drop事件；需手动监听dragover、drop事件并阻止默认行为，通过FileReader读取拖入的文本文件内容后赋值给value。
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-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');
}
}
});
拖拽网页文字到 textarea 为什么有时失效
不是 layui 的问题，而是浏览器策略限制：只有用户主动触发（如鼠标按下选中）的文字才能被拖出；JS 动态生成或 contenteditable 区域未聚焦时，dragstart 可能被忽略。
- 确保被拖源是可选中、可交互的元素（
p、div等），且没设user-select: none - textarea 必须处于 focus 状态，否则 drop 后光标位置不确定，可能插到开头或末尾
- 移动端 Safari 对 drag/drop 支持极弱，基本不可用，不要依赖
- 如果拖入后内容被截断或乱码，大概率是文件编码非 utf-8，FileReader 需指定正确编码（如
gbk需用iconv-lite转换）
替代方案：用 contenteditable + layui 样式模拟可拖拽文本区
真要支持自由拖入 HTML/富文本，textarea 天然受限；更可行的是用 div[contenteditable="true"]，加上 layui-textarea 的 class 和样式，再监听 drop 解析 text/html。
- 设置
style="min-height: 120px; padding: 10px;"模拟 textarea 内边距 - drop 时用
event.dataTransfer.getData('text/html')或'text/plain'获取内容 - 插入前清理危险标签（如
<script>），避免 XSS - 注意：
contenteditable不受 layui 表单验证约束，提交前需手动提取innerHTML或innerText
这种做法绕过了 textarea 的限制，但代价是失去原生换行、滚动、键盘行为的一致性——复杂场景下，得自己补全 Enter 换行、Tab 缩进等逻辑。
