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

站长 折腾 2023-11-11 2273

很多网站中会用到点击复制的效果,例如,点击复制pre的代码块,点击复制链接,点击复制淘宝代码,相信很多人都用过或者见过,那么今天分享一个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!

TAGS

──── 0人觉得很赞 ────
最新回复 (0)
返回