HTML標簽實現雙擊可編輯效果

基于VUE的一個例子

<span @dblclick="edit" style="cursor:pointer;" ref="element">雙擊可編輯</span>

edit(element) {
      // 獲取要編輯的文本內容
      var oldHtml = element.target.innerText;
      // 創建一個新的 input 輸入框
      var newInput = document.createElement("input");
      // 為新的 input添加屬性
      newInput.type = "text";
      newInput.value = oldHtml;
      // 清空當前元素的文本內容
      element.target.innerText = "";
      // 把新的 input 框 追加到當前元素節點中
      element.target.appendChild(newInput);
      // 設置選擇文本的內容或設置光標位置（兩個參數：start,end；start為開始位置，end為結束位置；如果開始位置和結束位置相同則就是光標位置）
      newInput.setSelectionRange(0, oldHtml.length);
      // 為新 input 框獲取焦點
      newInput.focus();
      // 為新的 input 添加失去焦點事件
      newInput.onblur = function() {
        // 判斷失去焦點時，input 框的值是否與原值相同，相同則表示沒有修改，返回原值；不同則表示有改動，返回新值
        element.target.innerText = this.value == oldHtml ? oldHtml : this.value;
      };
},

常用場景：在表格內編輯任一行、任一列、任一個單元格內容