移动端、PC端如何实现点击按钮复制指定内容区域到粘贴板

本文链接： https://blog.csdn.net/hdp134793/article/details/88653044

首先说到这个东西：应该目前存在两类人，一是自力更生型，另一种则是巧学妙用性。
说的难听点就是：自己原生代码死扣的和引入他人插件的

【概念分析】那么我就说一下重点吧：针对移动端，它区别于PC端不只是屏幕适配的问题，还有一些常用的事件不兼容，举个最简单的例子:
我们常用的点击事件：click，它要是应用在移动端的话会存在300ms的延迟，现在这个社会是对响应要求最好的时代，都想体验飞速的响应速度。这样的话在移动端使用的话是不是有点碍眼。
那么就有这样的一个东西：touch 事件在某些场景下存在点击穿透的问题，其实存在一个shart和end的过程。
一般简单应用我们推荐用touch(touchstart或touchend)，相对好很多，这也能看出来其中的一个区别。
【言归正传】
A.原生型工程师会这样说：一个document就够了！
那么是不是这样的，会不会存在吹牛的成分，我们来一起见证下吧（简单粗暴上代码）：
HTML

<div id="text_copy">你需要复制的文字</div>
    <br>
    <input type="button" name="" value="复制上面内容" onclick="copyToClipboard('text_copy')">
    <br>
    <br>
    <input type="text" name="" placeholder="粘贴看效果">

function copyToClipboard(elementId) {
        // 创建元素用于复制
        var aux = document.createElement("input");
        // 获取复制内容
        var content = document.getElementById(elementId).innerHTML || document.getElementById(elementId).value;
        // 设置元素内容
        aux.setAttribute("value", content);
        // 将元素插入页面进行调用
        document.body.appendChild(aux);
        // 复制内容
        aux.select();
        // 将内容复制到剪贴板
        document.execCommand("copy");
        // 删除创建元素
        document.body.removeChild(aux);
        //提示
        alert("复制内容成功：" + aux.value);
    }

事实证明：吹了点牛逼，因为还有select()、execCommand（）、appendChild（）、removeChild（）等方法的主要支撑。
B.引用插件型会这样写：一个clipboard.js就完事了！
那么这肯定是吹牛逼啦，你给了我封装好的JS ，但是得教我怎么去使用吧？
先上例子给大伙瞧瞧，首先这些东西其实和layer、bootstrap等框架一个性质，封装好了的东西都有他们自有的固定标签和属性及相关方法，你们要想了解为什么，那么很抱歉的和各位说下，我也不晓得，哈哈哈哈
源码如下（执行不起来头砍下来给你们当夜壶）：

<body>
    <!-- 1. Define some markup -->
    <div>hello</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- 2. Include library -->
    <script src="../dist/clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>

那么写到这里也就差不多和大家告一段落了，其实在摸索的过程中你肯定会遇到各种问题，有什么问题或者有什么好的想法欢迎留言哟，在线秒回！
喜欢博主的可以给点小钱意思意思，反正扶贫1元能上榜，好多人能看到的
在这里插入图片描述
扶贫榜：http://www.bcodelove.top:8080/bcode/jsp/apphome/rewardlist/rewardlist.html

移动端、PC端如何实现点击按钮复制指定内容区域到粘贴板

猜你喜欢