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不管是什么版本都无法实现复制

clipboard.js实现复制

为什么要是用clipboard.js

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

install

你可以通过npm来获取它

npm install clipboard --save

如果你不用install, 可以下载一个ZIP文件

创建

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

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

然后需要通过传递DOM选择器,HTML元素或者HTML列表来实例化它

new Clipboard('.btn');

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

基于这个问题, 我们可以用事件代理, 它只用一个监听器来代替多个监听器

用法

我们可以利用HTML自定义属性来提高代码的可用性一个非常常用的列子就是点击某个按钮复制另一个元素的内容,你可以通过 data-clipboard-target 自定义属性来实现

<!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地址

我的个人博客,欢迎大家访问