• 微信
您当前的位置:首页  > 文章 >  点击复制代码,通过JS,点击后可直接复制预设内容到剪切板!

点击复制代码,通过JS,点击后可直接复制预设内容到剪切板!

作者:admin 时间:2021-03-11 阅读数:7人

在网页设计的时候,有时候为了用户体验,需要让用直接点击即可复制代码或别的文本内容
电脑屋小编是为了让用户可复制淘口令的时候才需要的!
经过各种淘,终于找到这一段手机电脑都可以使用的代码!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <title>复制</title>
</head>
<body>
    <script>  
           var textCopy=function (data) {
                var f=document.createElement("form");
                f.id="copy-"+Date.parse(new Date());
                f.onsubmit=function(){return false};
                f.style="opacity: 0;height: 1px;width: 1px;overflow: hidden;position:fixed;top: -1;left: -1;z-index: -1;"
                f.innerHTML=`<button onclick="story.select();document.execCommand("Copy");"></button>
                <textarea name="story">${data}</textarea>`;
                document.body.appendChild(f);
                document.querySelector(`#${f.id}>button`).click();  
                document.body.removeChild(document.getElementById(f.id));
            } 
    </script>
    <input id="test"  value="" />
    <button onclick="textCopy(document.getElementById("test").value)" >复制</button>    
</body>
</html>

声明

源码下载不顺利,比如源码在百度网盘的有时会被无故取消等,请联系QQ:46667551
本站大部分下载资源收集于网络,但除特别说明之外,基本全部亲自测试可用!
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。

原文链接:http://www.dnwfb.com//1533.html,转载请注明出处