JS怎么实现双击内容变为可编辑状态功能-创新互联

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

成都创新互联公司长期为1000+客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为云州企业提供专业的网站建设、做网站云州网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

代码部分:

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




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许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


文章标题:JS怎么实现双击内容变为可编辑状态功能-创新互联
地址分享:http://ybzwz.com/article/cecsjo.html