Label 雙擊變文本框、失焦還原 Label 的實現技巧

需求場景

在 Web 頁面中，希望實現一種交互效果：用戶雙擊 <label> 標簽時，它轉變為可編輯的文本框；當文本框失去焦點（blur）時，再自動變回 Label 並顯示修改後的內容。

核心思路

利用 JavaScript 動態切換 DOM 結構：雙擊時將 Label 替換為 <input>，並綁定 onblur 事件在失焦時將值寫回 Label。這是一種經典的「就地編輯」模式。

參考答案

該問題在 CSDN 已有類似討論，可參考：https://ask.csdn.net/questions/251893

代碼示例（原生 JS 實現）

<script type="text/javascript">
function toEdit(o, edit) {
  if (edit) {
    o.innerHTML = '<input type="text" value="' + o.innerHTML.replace(/"/g, '&quot;') + '" onblur="toEdit(this)" />';
    o.getElementsByTagName('input')[0].focus();
  } else {
    o.parentNode.innerHTML = o.value;
  }
}
</script>
<label ondblclick="toEdit(this, true)">點擊編輯</label>

此代碼演示了核心邏輯：toEdit 函數根據參數決定「展開編輯」還是「提交保存」，通過 innerHTML 替換實現視圖切換。

提示：實際項目中建議使用成熟的 UI 庫（如 Vue、React 的組件庫）或 jQuery 插件（如 jeditable）處理邊界情況（ESC 取消、Enter 確認、XSS 防護等）。