w2ui grid技术求助：展开行内可编辑div频繁失焦，求解决办法

我之前也碰到过一模一样的情况，w2ui的Grid在展开行后，手动添加的可编辑div总是刚获取焦点就立刻失去，折腾了好一阵才找到根源——主要是Grid的默认事件拦截和DOM渲染时机的问题。给你两个亲测有效的解决思路：

1. 阻止点击事件冒泡到Grid行 #

当你点击可编辑div时，事件会向上冒泡到Grid的行元素，而Grid自带的行点击逻辑会触发焦点重置，直接把焦点从你的div上夺走。所以第一步要给div绑定点击事件，阻止冒泡：

editDiv.on('click', function(e) {
  e.stopPropagation();
});

2. 延迟强制聚焦 #

展开行的面板DOM不是瞬间渲染完成的，如果立刻调用focus()，可能div还没完全挂载到页面上，自然没法获取焦点。用setTimeout延迟几十毫秒再聚焦，就能确保DOM就绪：

setTimeout(() => {
  editDiv.focus();
}, 100);

把这两点整合到你的Grid配置里，完整代码如下：

$(function () {
  $('#grid').w2grid({
    name: 'grid',
    header: 'List of Names',
    records: [
      { "recid": 1, "fname": "John", "lname": "Doe", "email": "jdoe@gmail.com", "sdate": "4/3/2024" }
    ],
    columns: [
      { field: 'fname', caption: 'First Name', size: '30%' },
      { field: 'lname', caption: 'Last Name', size: '30%' },
      { field: 'email', caption: 'Email', size: '40%' }
    ],
    onExpand: function(event) {
      // 创建可编辑div
      const editDiv = $('<div contenteditable="true" style="padding:10px; border:1px solid #ccc;">编辑这里...</div>');
      
      // 阻止事件冒泡，避免Grid行逻辑干扰
      editDiv.on('click', function(e) {
        e.stopPropagation();
      });
      
      // 将div添加到展开面板
      $(event.panel).append(editDiv);
      
      // 延迟聚焦，确保DOM渲染完成
      setTimeout(() => {
        editDiv.focus();
      }, 100);
    }
  });
});

如果还是有问题，你可以检查下有没有其他全局的焦点管理脚本，或者Grid的onClick事件有没有自定义逻辑，但大部分情况下这两个步骤就能解决失焦的问题。

内容的提问来源于stack exchange，提问作者Björn