JS 实现点击按钮复制一段文字

酒馆丁老师

发布于 2020-09-08 14:46:26

10.9K0

发布于 2020-09-08 14:46:26

文章被收录于专栏：丁老师的技术随笔丁老师的技术随笔

经常见到网页上点击按钮，就能复制某端文字，今天来实现下。

1.使用input 实现

2.使用cli

效果图

使用input 实现

JS 要获取某段文字最好是触发，onselect 事件，这个就能获得选中的内容。

那就加个 input 。

实现源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取openid</title>
<style>
  body{ text-align:center;}
  .p1{ line-height:200px; font-size:40px;}
  .download{ width:80%; margin:auto;}
  .download a{ width:100%; height:120px; background-color:#4da2fd; display:block; line-height:120px; color:#fff; font-size:40px;text-decoration:none;}
  .download p{ width:100%; line-height:30px; color:#555; font-size:35px;}
</style>
</head>

<body>

<p id="p1" class="p1">ASDDDDDDDDDDD</p>
<div class="download">
  <a href="javascript:;" onclick="copy()">复制</a>
    <input id="input_openid"  type="text" />
    <p id="p2"></p>
</div>



<script>


function copy() {

    var openid= document.getElementById("p1").innerText;
    document.getElementById('p2').innerText = "复制成功";
    document.getElementById('input_openid').value = openid
    document.getElementById('input_openid').select();
    document.execCommand("Copy");

}
</script>


</body>
</html>

但是这里需要设置下 input 的样式，不要让他展示出来，但是又不能设置为 hidden。

clipboard.min.js实现

clipboard.js是一个github上的开源项目，可以实现纯 JavaScript 
（无 Flash）的浏览器内容复制到系统剪贴板的功能。
github地址：https://github.com/Superheroo/copy-text/tree/master

实现源码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取openid</title>
<style>
  body{ text-align:center;}
  .p1{ line-height:200px; font-size:40px;}
  .download{ width:80%; margin:auto;}
  .download a{ width:100%; height:120px; background-color:#4da2fd; display:block; line-height:120px; color:#fff; font-size:40px;text-decoration:none;}
  .download p{ width:100%; line-height:30px; color:#555; font-size:35px;}
</style>
</head>

<body>

<p id="target" class="p1">ASDDDDDeeeewwwDDDDDD</p>

<div class="download">
  <a href="javascript:;" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">复制</a>
    <p id="p2"></p>
</div>


<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/clipboard.min.js"></script>
<script>
    $(document).ready(function () {
        //id="target" 的文本内容是被复制的内容
        var targetText = $("#target").text();
        // id="copy_btn" 是点击的按钮
        var clipboard = new ClipboardJS('#copy_btn');
        clipboard.on('success', function (e) {
            e.clearSelection();
            $("#p2").text("复制成功")
        });
    });
</script>
</body>
</html>

END

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-04-07，如有侵权请联系 cloudcommunity@tencent.com 删除

cli