Rumah >hujung hadapan web >tutorial js >用JS做的点击复制效果

用JS做的点击复制效果

php中世界最好的语言
php中世界最好的语言asal
2018-03-12 11:37:311892semak imbas

这次给大家带来用JS做的点击复制效果,用JS做的点击复制效果注意事项有哪些,下面就是实战案例,一起来看一下。

原理:
模拟通过全选表单内的textarea数据调用浏览器Copy命令实现复制

示例

<!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=&#39;story.select();document.execCommand("Copy");&#39;></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(&#39;test&#39;).value)" >复制</button>    </body></html>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

nodejs如何使用http模块编写上传图片接口测试客户端

h5制作性能变化折线图

nodejs怎样通过jsonp来实现单点登录Demo

Atas ialah kandungan terperinci 用JS做的点击复制效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn