您现在的位置是:

JS代码实现复制到剪贴板

发布时间:2021-12-20作者:小灵龙来源:未知点击:140

问题描述:

   一些网站上会出现分享,转发之类的链接,只要点击按钮就直接复制到了剪贴板。我还找到了一些办法,其一是:ZeroClipboard 其二是:clipboard.js。
我分享的这个办法是原生态JS代码实现。在谷歌浏览器上不能实现。


解决办法:
1,原生态
<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="要复制的内容"/>
<input type="button" id="btn" value="点击复制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
    var btn = document.getElementById('btn');
    btn.addEventListener('click', function(){
        var inputText = document.getElementById('inputText');
        var currentFocus = document.activeElement;
        inputText.focus();
        inputText.setSelectionRange(0, inputText.value.length);
        document.execCommand('copy', true);
        currentFocus.focus();
    });
</script>


2,clipboard.js

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>this is 方案 1 </title>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
    <!--以下三个是备用  浏览器打不开第一个 换下面的-->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
    <!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
    <!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->
</head>
<body>
<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
 
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
  Copy to clipboard
</button>
 
<hr>
<br>
<!-- Trigger -->
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>
 
<script>
    //必须要初始化 第一种初始化
    var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
 
 
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is 方案 2</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<div id="btn" data-clipboard-text="1">
    <span>Copy</span>
</div>
 
<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--以下三个是备用  浏览器打不开第一个 换下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->
 
<!-- 3. Instantiate clipboard by passing a HTML element -->
<script>
    var btn = document.getElementById('btn');
    var clipboard = new ClipboardJS(btn);
    clipboard.on('success', function(e) {
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个选择器下的复制</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- 1. Define some markup -->
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>
 
<!-- 2. Include library -->
<!-- 2. Include library -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!--以下三个是备用  浏览器打不开第一个 换下面的-->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script>-->
<!--<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/v2.0.0/dist/clipboard.min.js"></script>-->
<!--<script src="https://unpkg.com/clipboard@2.0.0/dist/clipboard.min.js"></script>-->
 
<!-- 3. Instantiate clipboard by passing a list of HTML elements -->
<script>
    var btns = document.querySelectorAll('button');
    var clipboard = new ClipboardJS(btns);
    clipboard.on('success', function(e) {
         alert("已经复制到剪贴板");
        console.log(e);
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });
</script>
</body>
</html>

--------------------------------------------------------------------------------------------------------------------------
    <script type="text/javascript">
        function copyToClip(content, message) {
            var aux = document.createElement("input");
            aux.setAttribute("value", content);
            document.body.appendChild(aux);
            aux.select();
            document.execCommand("copy");
            document.body.removeChild(aux);
            if (message == null) {
                layer.msg("复制成功");
            } else{
                layer.msg(message);
            }
        }
    </script>

如果帮到了您,请打赏一二!

标签:JS剪贴板 复制到剪贴板 剪贴板