layui文本域如何绑定双击事件-Layui教程-PHP中文网

要实现layui表格双击编辑textarea，需将列的edit设为返回含class="layui-textarea"的html函数，再在done回调中手动聚焦并监听blur更新数据。

layui文本域如何绑定双击事件

layui表格单元格里怎么让textarea响应双击

直接给 textarea 绑定 dblclick 事件没用——因为 layui 表格的单元格双击行为默认由 editTrigger: 'dblclick' 控制，而这个机制只认原生 edit: 'text' 这类字段，不接管你手动塞进去的 textarea。双击触发点其实是 td，不是里面的 textarea。

真正要实现「双击单元格 → 编辑态 textarea 出现并聚焦」，得走两步：先让列支持双击编辑，再用函数返回带 layui-textarea 的 HTML。

edit 字段不能写 'textarea'，必须写成函数，返回含 class="layui-textarea" 的 textarea 字符串
函数里要手动拼接初始值：+ (d.desc || '') +，否则空值时显示 undefined
必须加 style="height: 80px; resize: none;"，不然默认只有一行且可拖拽破坏布局
别指望双击后自动聚焦——textarea 插入 DOM 后得在 done 回调里手动 this.focus()

为什么双击后textarea不聚焦、要再点一次

layui 的编辑流程只对内置 edit: 'text' 的 input 做了自动聚焦，自定义模板完全不在它的生命周期里。你返回的 textarea 是纯静态 HTML，没有绑定任何事件钩子。

解决办法是在 table.render() 的 done 回调中，对新插入的 textarea 单独监听 click 并聚焦：

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

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

下载

done: function(res, curr, count) {
  layui.$(this.elem).find('textarea').each(function() {
    this.addEventListener('click', function(e) {
      e.stopPropagation();
      this.focus();
      this.setSelectionRange(this.value.length, this.value.length);
    });
  });
}

一定要用原生 this.addEventListener，jQuery 的 .focus() 在动态插入场景下不可靠
e.stopPropagation() 不可少，否则 click 会冒泡到 td，可能触发行选中或跳转
如果表格设了 editTrigger: 'dblclick'，这里监听 click 就够了；若设成 'click'，需额外防重复触发

编辑完怎么把textarea的值写回表格缓存

table.on('edit(filter)') 里的 obj.value 一定是空的——因为 layui 不会自动读取你函数返回的 textarea 的值。它只对原生 input 有取值逻辑。

必须在 blur 或 keydown.enter 时手动读值，并调用 obj.update()：

done: function(res, curr, count) {
  layui.$(this.elem).find('textarea').on('blur', function() {
    var $this = layui.$(this);
    var value = $this.val().trim();
    var tr = $this.closest('tr');
    var index = tr.data('index');
    var data = table.cache['yourTableId'][index];
    data.desc = value; // 假设字段是 desc
    obj.update(data); // 注意：obj 来自 edit 事件回调，这里需提前保存引用或改用 table.cache 更新
  });
}