移动Web开发——复制操作

kycool 发布于2019-08-22 10:44 / 1277人阅读

摘要：上周接到一个需求点击按钮，复制指定的文字到粘贴板。有了这两个方法，前面的功能就有了大概的思路首先动态创建元素，然后动态制定执行进行选中，然后通过方法执行复制即可。返回一个对象，表示用户选择的文本。将一个区域对象加入选区。

上周接到一个需求——点击按钮，复制指定的文字到粘贴板。我也是第一次做这种功能，最后通过查资料实现了这个功能。

正文

其实这个功能实现起来也不难，主要用到了两个方法：execCommand和select。

execCommand：可以让我们执行如复制、剪切、粘贴等命令，还可以改变字体颜色、大小等。更多具体的用法可以看这里，在这就不说了。

select：只有input和textarea可以执行该方法；用于选取文本框中的内容。

有了这两个方法，前面的功能就有了大概的思路：首先动态创建input元素，然后动态制定input[value]；执行select()进行选中，然后通过execCommand方法执行复制即可。
接下来就是代码实现了：

function copyContent(eleId){
    var temp = document.createElement("input")
    temp.setAttribute("value",document.getElementById(eleId).innerHTML)
    document.body.appendChild(temp)
    temp.select()
    document.execCommand("copy")
    document.body.removeChild(temp)
}

Demo地址

另一种方法

上面的方面虽然可以实现功能，但创建一个input元素然后再删掉感觉不太好，能不能直接copy指定DOM元素呢？其实是可以的，这里我们需要先介绍几个API：

document.createRange()：返回一个Range对象，用来创建选中容器。

Range.selectNode(referenceNode)：用来设定一个包含节点和节点内容的Range。

window.getSelection()：返回一个 Selection 对象，表示用户选择的文本。

Selection.addRange(range):将一个区域（Range）对象加入选区。

Selection.removeRange(range)/removeAllRanges():从选区中移除一个区域/将所有的区域都从选区中移除。

要用到的API就上面这些，这里直接上Demo
下面是主要代码：

function copyToClipboard(eleId){
    var copyDOM = document.getElementById(eleId);
    var range = document.createRange();
    range.selectNode(copyDOM);
    window.getSelection().addRange(range);
    document.execCommand("copy");
    window.getSelection().removeAllRanges(); 
}

海外云主机云服务器移动web开发 web移动端开发 HTML5移动Web开发指南 linux复制文件到移动硬盘

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91150.html

【译】Hybrid or Native: 合适的才是最好的

摘要：本文转载自众成翻译译者文蔺链接原文译者注本文讲到的可能和我们通常理解的略有差异。文中部分主要讲到的是，这一点可能在一些开发者看来是有争议的。谈到，最好也是最简单的办法是使用免费开源的框架。需要快速开发打样那可能最好的选择。本文转载自：众成翻译译者：文蔺链接：http://www.zcfy.cc/article/861原文：http://www.telerik.com/blogs/h...

张春雷 2019-08-21 14:03 评论0 收藏0
eyoucms v1.4.9授权破解版易优cms企业建站系统去版权版 v1.4.9

摘要：授权破解版易优企业建站系统易优企业建站系统是一款十分优秀专业的为企业创建网站服务的软件。去版权破解版强大好用，为企业创建网站提供很多帮助和便利。直接去易优官网，购买商业授权即可去除版权。eyoucms v1.4.9授权破解版(易优企业建站系统)是一款十分优秀专业的为企业创建网站服务的软件。eyoucms v1.4.9去版权破解版强大好用，为企业创建网站提供很多帮助和便利。易优cms破解授权...

番茄西红柿 2021-08-10 09:40 评论0 收藏2637
前端基础入门

摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...

shinezejian 2019-08-22 13:51 评论0 收藏0