使用js实现点击按钮复制目标内容

!
您是否也想出现在这里? 【点这】联系我们
腾讯云

很多网站中会用到点击复制的效果,例如,点击复制pre的代码块,点击复制链接,点击复制淘宝代码,相信很多人都用过或者见过,那么玩转网今天分享一个js实现点击复制到剪切板的功能!

使用js实现点击按钮复制目标内容

html代码:

<p class="copy_url singleHidden share_text_02" id="target" >https://appnsdahiuhibaxankbgsregbcj...</p>
<textarea id="input_copy" style="opacity: 0;height: 0;">这是幕后黑手</textarea>
<span class="copy_btn" id="copy_btn">复制</span>

js代码:

 $("#copy_btn").click(function(){
    var urls = $(".copy_url").text();
    console.log(urls); 
    //开始复制链接
    var input = document.getElementById("input_copy");
    input.value = urls; // 修改文本框的内容
    input.select(); // 选中文本
    document.execCommand("copy"); // 执行浏览器复制命令
})

注意:这是js+jquery实现的,用的话别忘引入jquery!


特别声明:本内容不构成投资建议不做任何投资理财建议。!!!

© 版权声明
THE END
感觉文章不错,分享给身边的朋友吧!
点赞5
分享