jQuery blur事件异常：双击生成的第二个time输入框无法正常编辑

问题原因 #

点击第二个输入框时，第一个输入框的blur事件会立即触发，代码直接将输入框替换为文本内容，导致第二个输入框还没获取焦点就被销毁，无法继续编辑。本质是blur事件的触发逻辑没考虑到「焦点切换到同区域内其他输入框」的场景。

解决方案 #

1. 给blur事件加延迟判断 #

在blur事件中设置短定时器，判断焦点是否仍在当前编辑容器内，若在则不执行提交逻辑；若焦点在外部，再执行Ajax请求并替换内容。

2. 替换全局变量为元素data属性 #

原代码中shiftId、userId、date为全局变量，同时编辑多个.shift元素会导致数据混乱。建议将这些数据存储在.shift-value的data-*属性中，使用时直接从元素获取。

修改后的完整代码 #

$(document).ready(function () {
  $(document).on("dblclick", ".shift", function () {
    const cell = $(this);
    const shiftValueEl = cell.find(".shift-value");
    // 从原元素获取数据，存储到新元素的data属性
    const shiftId = shiftValueEl.attr("id");
    const userId = shiftValueEl.attr("user-id");
    const date = shiftValueEl.attr("date");
    
    const currentValue = cell.text().trim();
    const [startVal, endVal] = currentValue.split("-");
    const inputs = `
      <input type="time" class="start" value="${startVal || '00:00'}"> 
      - 
      <input type="time" class="end" value="${endVal || '00:00'}">
    `;
    // 生成带data属性的编辑容器
    cell.html(`
      <div class='shift-value' 
           data-date="${date}" 
           data-user-id="${userId}" 
           data-shift-id="${shiftId}">
        ${inputs}
      </div>
    `);
    cell.find(".start").focus();
  });

  $(document).on("blur", ".shift input", function () {
    const shiftValueEl = $(this).closest(".shift-value");
    // 延迟200ms判断焦点位置，避开输入框切换的间隙
    setTimeout(() => {
      // 检查当前焦点是否属于当前编辑容器内的元素
      const isFocusInShift = shiftValueEl.has(document.activeElement).length > 0;
      if (isFocusInShift) return;

      const start = shiftValueEl.find(".start").val();
      const end = shiftValueEl.find(".end").val();
      const currentValue = `${start}-${end}`;
      // 从data属性读取数据，避免全局变量污染
      const shiftId = shiftValueEl.data("shift-id");
      const userId = shiftValueEl.data("user-id");
      const date = shiftValueEl.data("date");

      if (currentValue !== "00:00-00:00") {
        shiftValueEl.html(currentValue);
        $.ajax({
          url: "rooster/create_shift.php",
          method: "POST",
          data: {
            start_time: start,
            date: date,
            end_time: end,
            user_id: userId,
            shiftId: shiftId,
          },
          success: function (response) {
            console.log(response);
          },
          error: function (xhr, status, error) {
            console.error(xhr.responseText);
          },
        });
      } else if (currentValue === "00:00-00:00") {
        shiftValueEl.html(currentValue);
        $.ajax({
          url: "rooster/delete_shift.php",
          method: "POST",
          data: {
            shift_id: shiftId,
          },
          success: function (response) {
            console.log(response);
          },
          error: function (xhr, status, error) {
            console.error(xhr.responseText);
          },
        });
      }
    }, 200);
  });
});

额外说明 #

• 200ms的延迟是经验值，可根据实际交互感受调整，确保焦点切换完成后再判断
• 使用closest(".shift-value")代替parent()，结构变更时代码更健壮
• 给输入框设置默认值'00:00'，避免拆分空字符串时出现undefined

内容的提问来源于stack exchange，提问作者thomas Dekker