HTML点击文字/图片/按钮一键复制内容代码

点击文字复制内容代码

  • 闲来无事,写了个一键复制的代码,非常的实用,直接加在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>
© 版权声明
THE END
点赞1153 分享
评论 抢沙发

请登录后发表评论