使用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!

 

 

免责声明:玩转网作为开放的信息发布平台,所有资讯仅代表作者个人观点,与玩转网无关。如文章出现侵权、违规及其他不当言论,请联系微信:pi1881

风险提示:本站所提供的资讯不代表任何投资暗示。投资有风险,入市须谨慎。

山高不厌攀,水深不厌潜,学精不厌苦,只有努力才能赢得最后的成功!

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