爱影CMS-全新高性能管理系统！爱影CMS-全新高性能管理系统！赞助广告位赞助广告位

点击文字复制内容代码

闲来无事，写了个一键复制的代码，非常的实用，直接加在html即可使用！

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <script src="https://lib.baomitu.com/clipboard.js/2.0.11/clipboard.min.js"></script></head>
<body>
    <div id="btn" data-clipboard-text="青鹿云milubk.com">
    <span>点击复制</span>
</div>
<script>    
    var btn = document.getElementById('btn');    
    var clipboard = new ClipboardJS(btn);    
    clipboard.on('success', function(e) {        
        alert('复制成功')   
    });    
    clipboard.on('error', function(e) {        
        console.log(e);    
    });
</script>
</body>
</html>

点击图片复制内容代码

实现在手机浏览器上点击一张图片或者一个按钮，自动复制一段文字到剪切板中，一共有三步

一、图片或者按钮添加js触发

<img src="images/ewm.png"  onClick="copyUrl2()"/> //单击图片触发copyUrl2()函数

二、写要复制进剪切板中的文字，并隐藏。

<p style="display:none;" cols="20" id="biao1">要复制的文字</p>

三、写copyUrl2()函数。

<script type="text/javascript">
    function copyUrl2()
        {
            var Url2=document.getElementById("biao1").innerText;
            var oInput = document.createElement('input');
            oInput.value = Url2;
            document.body.appendChild(oInput);
            oInput.select(); // 选择对象
            document.execCommand("Copy"); // 执行浏览器复制命令
            oInput.className = 'oInput';
            oInput.style.display='none';
            alert('您已成功复制公众号名【***】，请前往微信添加！');
        }
</script>

点击按钮复制内容代码

 <!DOCTYPE html>
<html>
 
<head>
<meta charset="UTF-8">
<meta name="青鹿云" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
 
<body>
<button>按钮</button>
</body>
<script>
document.querySelector("button").onclick = ({ target }) => {
alert("复制成功");
}
</script>
 
</html>

本站网络名称： 青鹿云

本站永久网址： www.milubk.com

网站侵权说明：本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权请联系站长删除处理。
1 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
2 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
3 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END