Label 雙擊變文本框、失焦還原 Label（完整可運行代碼）

需求重述

點擊 Label 變為輸入框，輸入框失焦後變回 Label 並顯示新值；雙擊再次編輯。

原生 JavaScript 實現（無依賴）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Label 編輯演示</title>
  <style>
    .editable-label { cursor: text; border: 1px solid transparent; padding: 2px 4px; display: inline-block; min-width: 80px; }
    .editable-label:focus-within { border-color: #007bff; background: #fff; }
    .editable-label input { border: none; outline: none; width: 100%; font: inherit; }
  </style>
</head>
<body>
  <label class="editable-label" ondblclick="startEdit(this)">雙擊編輯我</label>

  <script>
  function startEdit(label) {
    if (label.querySelector('input')) return; // 防重複
    const text = label.textContent;
    label.innerHTML = '<input type="text" value="' + escapeHtml(text) + '">';
    const input = label.querySelector('input');
    input.focus();
    input.select();

    const finish = () => {
      const newVal = input.value;
      label.textContent = newVal || text; // 空則恢復原值
      label.ondblclick = () => startEdit(label); // 重新綁定
    };

    input.addEventListener('blur', finish);
    input.addEventListener('keydown', e => {
      if (e.key === 'Enter') { input.blur(); }
      if (e.key === 'Escape') { input.value = text; input.blur(); }
    });
  }

  function escapeHtml(str) {
    return str.replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
  }
  </script>
</body>
</html>

關鍵點解析

1. 事件委托：用 ondblclick 觸發編輯態，blur 確認提交，Enter/Esc 鍵盤支持。
2. XSS 防護：escapeHtml 轉義實體字符，防止注入腳本。
3. 狀態恢復：輸入為空時回滾原值，體驗更友好。
4. 無依賴：純原生 JS，兼容所有現代瀏覽器，壓縮後不足 1KB。

擴展建議：若項目已用 Vue/React，請直接使用 v-model / useState 綁定雙向數據，配合 contenteditable 或組件庫（如 Element Plus 的 ElInput）實現更健壯。