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

火币

火币HTX

火币是全球三大交易所之一,虚拟货币交易平台安全可靠,注册领取新人礼包!

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

图片[1]-玩转网使用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赞赏 分享