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

24天以前  |  阅读数:22 次  |     收藏

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

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

相关文章:


SSH 登录失败:Host key verification failed

PHP分页显示制作详细讲解

PHP自定义函数获取搜索引擎来源关键字的方法

在Zeus Web Server中安装PHP语言支持

将二进制数据转为16进制以便显示

让你成为最历害的git提交人

再谈PHP中单双引号的区别详解

PHP实现简单爬虫的方法

php+ajax+json 详解及实例代码

Python 2与Python 3版本和编码的对比

php实现数组中索引关联数据转换成json对象的方法

桌面中心(一)创建数据库

wget使用技巧

PHP设计模式之工厂模式与单例模式

php封装的page分页类完整实例

php数组合并array_merge()函数使用注意事项

Yii2汉字转拼音类的实例代码

获取IMSI

getAttribute和getAttributeNode

Java生成UUID