扣丁书屋

HTML标签实现双击可编辑效果

1年以前  |  阅读数:39 次  |    

基于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;
      };
},

常用场景:在表格内编辑任一行、任一列、任一个单元格内容

相关文章: