js 实现复制剪切

时间  2020-05-25 标签 js 实现 复制 剪切

原生js实现复制

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>copy</title>
</head>
<body>
<span id='copy'>复制哈哈哈哈啊哈哈</span>
<button id='btn'>复制</button>
</body>
<script type="text/javascript">
    function copyText()
    {
        var Url2=document.getElementById("copy").innerText;
        var oInput = document.createElement('input');
        oInput.value = Url2;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display='none';
        alert('复制成功');
    }
    document.getElementById('btn').onclick = function() {
        copyText()
    }
</script>
</html>

上线代码只是我在 脚本之家 看见的一段代码,上面还有不少实现复制的方法,这些方法若是只是用在PC端那么已经够了,若是要使用在移动端, Android高版本没有任何问题,可是IOS不论是什么版本都没法实现复制javascript

clipboard.js实现复制

为何要是用clipboard.js

复制文本到剪切板并不难, 它不须要不少个步骤或者加载不少KB的代码来完成, 最重要的是, 它不该该依赖于Flash或者任何臃肿的框架, 这就是clipboard.js开发的目的html

install

你能够经过npm来获取它java

npm install clipboard --save

若是你不用install, 能够下载一个ZIP文件git

建立

首先将dist上面的js或者第三方提供的文件引入到网页中github

<script src="dist/clipboard.min.js"></script>

而后须要经过传递DOM选择器,HTML元素或者HTML列表来实例化它chrome

new Clipboard('.btn');

在内部咱们须要获取与你选择器所匹配的元素,并为每一个元素添加监听器,可是有一个问题,若是你有数百个匹配项, 那这个方法会消耗大量的内存.npm

基于这个问题, 咱们能够用事件代理, 它只用一个监听器来代替多个监听器浏览器

用法

咱们能够利用HTML自定义属性来提升代码的可用性 一个很是经常使用的列子就是点击某个按钮复制另外一个元素的内容,你能够经过 data-clipboard-target 自定义属性来实现app

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <script src="dist/clipboard.min.js"></script>
</head>
<body>
    <input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
    <!-- Trigger -->
    <button class="btn" data-clipboard-target="#foo">
        <img src="assets/clippy.svg" alt="Copy to clipboard">
    </button>
</body>
<script type="text/javascript">
    new Clipboard('.btn');
</script>
</html>

从一个元素中剪切文本框架

你能够定义一个属性data-clipboard-action来指定是要copy仍是cut, 若是省略这个属性,会默认设置copy

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <script src="dist/clipboard.min.js"></script>
</head>
<body>
    <!-- Target -->
    <textarea id="bar">Mussum ipsum cacilds...</textarea>
    <!-- Trigger -->
    <button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
        Cut to clipboard
    </button>
</body>
<script type="text/javascript">
    new Clipboard('.btn');
</script>
</html>

正如你所想的同样,这个cut属性只适用于<input />和<textarea></textarea>元素

从属性复制文本

事实上你不须要其余元素来复制它的内容,你能够再出发元素上包含一个 data-clipboard-text属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <script src="dist/clipboard.min.js"></script>
</head>
<body>
    <!-- Trigger -->
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
        Copy to clipboard
    </button>
</body>
<script type="text/javascript">
    new Clipboard('.btn');
</script>
</html>

事件

在实际开发用,你须要显示一些用户反馈,不如复制/剪切成功这样的提示语,这就是咱们为何要写一些事件,好比success和error一块儿来实现你的定制逻辑

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>main</title>
    <script src="dist/clipboard.min.js"></script>
</head>
<body>
    <!-- Trigger -->
    <button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
        Copy to clipboard
    </button>
</body>
<script type="text/javascript">
    var clipboard = new Clipboard('.btn');

    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
    });

    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });
</script>
</html>

高级用法

若是你不想修改你的HTML,那么你可使用一个很是方便的API, 全部你要作的一些事情都包含在一个function中, 在和这个函数中写你的逻辑,而且返回一个值

列如你须要动态设置一个target,你须要返回一个节点

new Clipboard('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling;
    }
});

若是你想动态设置一个text,你须要返回一个字符串

new Clipboard('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label');
    }
});

为了在Bootstrap Modals或任何其余更改焦点的库中使用，您须要将聚焦的元素设置为container值

new Clipboard('.btn', {
    container: document.getElementById('modal')
});

另外，若是您正在使用单页面应用程序，则可能须要更精确地管理DOM的生命周期。如下是清理咱们建立的事件和对象的方法

var clipboard = new Clipboard('.btn');
clipboard.destroy();

浏览器支持

这个库依赖于Selection和execCommand API,第一个支持全部浏览器，第二个支持如下浏览器

chrome edg firefox IE Opera Safari
42+ 12+ 41+ 9+ 29+ 10+

若是你须要兼容低版本的浏览器 clipboard .js会优雅降级

你所要作的就是显示一个工具提示，说明Copied什么时候success调用事件，以及Press Ctrl+C to copy什么时候error调用事件，由于文本已经被选中

您还能够经过运行来检查是否支持clipboard.js Clipboard.isSupported()，这样您就能够隐藏UI中的复制/剪切按钮

参考连接

官网地址

github地址

 

个人我的博客,欢迎你们访问

联系我们 沪ICP备2021010478号-7