javascript点击鼠标实现数据复制功能

最新推荐文章于 2022-12-30 22:15:00 发布

原创最新推荐文章于 2022-12-30 22:15:00 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #代码片段

本文介绍了两种在JavaScript中实现点击按钮复制数据的方法，并提供了具体的代码示例，强调了此类操作必须由用户发起且不能异步执行。通过引入jQuery库，可以方便地实现数据复制功能。复制成功后，可以通过Ctrl+v检查效果。

方法1：

        /**
         * 复制方法
         * @param data 要复制的数据
         * @private
         */
        function __copy(data) {
            if (window&&window.clipboardData) {
                window.clipboardData.setData("Text", data);
            }else{
                var el = $("<div>");
                el.css({
                    "position":"absolute",
                    "left":'-99999px',
                    "top":'-99999px'
                });
                el.text(data);
                $("body").append(el);

                //创建一个范围
                var range = document.createRange();
                range.selectNodeContents(el.get(0));
                var selection = window.getSelection();
                selection.removeAllRanges();
                selection.addRange(range);
                var success;
                try {
                    success = document.execCommand("copy", false, null);
                    alert('复制成功');
                }
                catch (e) {
                    alert('复制失败');
                }
                if (success) {
                    // remove temp element.
                    el.remove();
                }
            }
        }

方法2：

安装并引入jquery

npm install --save-dev g_common_fn

例子


var commonFn = require('g_common_fn');
commonFn.copy("要复制的内容");

https://github.com/guosimin/g_common_fn

注意：规范中说明，此类操作不能异步执行，只能由用户发起。
这里写图片描述

复制成功后，Ctrl+v查看效果吧~