JS怎么实现双击内容变为可编辑状态功能

这篇文章主要介绍JS怎么实现双击内容变为可编辑状态功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了沐川免费建站欢迎大家使用！

代码部分：

注意：设置选择文本的内容或设置光标位置

  function ShowElement(element) {
    var oldhtml = element.innerHTML;
    //创建新的input元素
    var newobj = document.createElement('input');
    //为新增元素添加类型
    newobj.type = 'text';
    //为新增元素添加value值
    newobj.value = oldhtml;
    //为新增元素添加光标离开事件
    newobj.onblur = function() {
      element.innerHTML = this.value == oldhtml ? oldhtml : this.value;
      //当触发时判断新增元素值是否为空，为空则不修改，并返回原有值 
    }
    //设置该标签的子节点为空
    element.innerHTML = '';
    //添加该标签的子节点，input对象
    element.appendChild(newobj);
    //设置选择文本的内容或设置光标位置（两个参数：start,end；start为开始位置，end为结束位置；如果开始位置和结束位置相同则就是光标位置）
    newobj.setSelectionRange(0, oldhtml.length);
    //设置获得光标
    newobj.focus();
  }



  

    
你的用户名:
    三人行
    
你的个性档
    三人行，必有我师焉！
  

双击事件：ondblclick

以上是“JS怎么实现双击内容变为可编辑状态功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！