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怎么实现双击内容变为可编辑状态功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。