JS 前端点击复制实现 Clipboard对象 使用实例


有时会碰到这样的场景：用户看到页面上一段话很精彩，想复制下来：第一个方案是用户自己选择区域，然后右键复制；第二个方案，就是站点维护人员为方便用户，制作复制按钮，用户点击页面上复制按钮后，内容复制。

正文

有时会碰到这样的场景：用户看到页面上一段话很精彩，想复制下来：第一个方案是用户自己选择区域，然后右键复制； 第二个方案，就是站点维护人员为方便用户，制作复制按钮，用户点击页面上复制按钮后，内容复制。

下面就针对第二种解决方案给一个前端的js实例，需要提前把clipboard.min.js文件引入进来：

<div id="copy_str" data-clipboard-text="被复制的内容"></div>

<script>
var clipboard = new Clipboard('#copy_str');

// 复制成功执行的回调，可选
clipboard.on('success', function (e) {
    ZENG.msgbox.show("复制成功", 4);
});

// 复制失败执行的回调，可选
clipboard.on('error', function (e) {
    ZENG.msgbox.show("复制失败", 5, 2000);
});
</script>

这里用到了 ZENG.msgbox 提示插件。

再举一个js实例：

<P>
    用户ID：<?=$item['user_id']?><span class="font-blue" id="sql_copy" data-id="<?=$item['user_id']?>" data-type="user"> 复制 </span>
</P>
<input type="hidden" id="sql_str" data-clipboard-text="被复制的内容">
<script>
$(function(){
    /*****复制链接的功能*********/
    var clipboard = new Clipboard('#sql_str');

    // 复制成功执行的回调，可选
    clipboard.on('success', function (e) {
        swal('复制成功！', '', 'success');
    });

    // 复制失败执行的回调，可选
    clipboard.on('error', function (e) {
        swal('复制失败！', '', 'warning');
    });

    $(document).on('click', '.class-detail #sql_copy', function () {
        var id = $(this).data('id');
        var type = $(this).data('type');

        if (id == undefined || id == '' || id == 0 || type == undefined || type == '' || type == 0 ) {
            swal('未选择或信息异常！', '', 'warning');
        } else {
            // 拼接页面地址
            switch( type )
            {
                case 'student':
                    var table = 'user';
                    break;
            }
            var sql_str = 'select * from ' + table + ' WHERE id = ' + id;
            $('.class-detail #sql_str').attr('data-clipboard-text', sql_str);
            // 触发复制
            $('#sql_str').click();
        }

        return false;  // 阻止冒泡
    });
});
</script>

<P>
        用户ID：<?=$item['user_id']?><span class="font-blue" id="sql_copy" data-id="<?=$item['user_id']?>" data-type="user"> 复制 </span>
</P>
<input type="hidden" id="sql_str" data-clipboard-text="被复制的内容">
<script>
    $(function(){
                /*****复制链接的功能*********/
                var clipboard = new Clipboard('#sql_str');

                // 复制成功执行的回调，可选
                clipboard.on('success', function (e) {
                            swal('复制成功！', '', 'success');
        });

                // 复制失败执行的回调，可选
                clipboard.on('error', function (e) {
                            swal('复制失败！', '', 'warning');
        });

                $(document).on('click', '.class-detail #sql_copy', function () {
                            var id = $(this).data('id');
                            var type = $(this).data('type');

                            if (id == undefined || id == '' || id == 0 || type == undefined || type == '' || type == 0 ) {
                                        swal('未选择或信息异常！', '', 'warning');
                } else {
                                        // 拼接页面地址
                                        switch( type )
                        {
                                                    case 'user':
                                                      var table = 'user';
                                                      break;
                        }
                                        var sql_str = 'select * from ' + table + ' WHERE id = ' + id;
                                        $('.class-detail #sql_str').attr('data-clipboard-text', sql_str);
                                        // 触发复制
                                        $('#sql_str').click();
             }

                         return false;  // 阻止冒泡
                });
    });
</script>

参考资料

clipboard.js http://www.clipboardjs.cn/

clipboard.js 踩坑 https://blog.csdn.net/weixin_34273046/article/details/91460980

https://blog.csdn.net/qq_37465264/article/details/79892397

https://blog.csdn.net/qq_27682041/article/details/78530582

ZENG-msgbox https://github.com/scepterscythe/ZENG-msgbox

腾讯UED 漂亮的提示信息 https://www.cnblogs.com/zengxiangzhan/archive/2011/09/12/2173939.html

返回