一句代码搞定浏览器复制文本和兼容性问题【复制粘贴js库】

一句代码搞定浏览器复制文本和兼容性问题【复制粘贴js库】

文本复制在前端可以说是一个比较常用的功能，但是官方的API和一些现有的库不易使用，而且使用复杂，兼容性也可能会有问题。

于是本人封装了一个自己经常用到的文本复制方法，整理成一个库： copy-util，使用起来十分简单，一句代码搞定复制文本，也支持绑定DOM元素使用，使可以0代码完成复制功能

以下是官方文档，欢迎使用

🚀 简单易用、体积小巧的 web 复制文本 js 库

在线试用

---

0.快速使用

使用 npm 安装：

npm i copy-util

import Copy from 'copy-util';
Copy('Copy something'); // 一句代码搞定复制文本

使用 script 标签使用：

<script src="https://cdn.jsdelivr.net/gh/theajack/copy/cdn/copyutil.latest.min.js"></script>
<!--
或通过版本号引用
<script src="https://cdn.jsdelivr.net/gh/theajack/copy/cdn/copyutil.{version}.min.js"></script>
-->
<script>
    Copy('Copy something');
</script>

1. 功能

1. 一句代码搞定浏览器端复制文本
2. 体积仅 1.41 kb
3. 支持结合 dom 使用， 无需编写 js 代码
4. 兼容性良好，支持主流浏览器
5. typescript 支持

2. API

2.1. Copy(string)

copy-util 仅用一行代码就可以搞定 web 端文本复制

该方法返回一个布尔类型，表示复制是否成功:

import Copy from 'copy-util';
var isSuccess = Copy('Copy something'); // 一句代码搞定复制文本
// 该方法返回一个布尔类型，表示复制是否成功

2.2. Copy(object)

您可以使用配置来绑定需要复制的 dom 元素和需要复制的内容类型:

<input id="inputEl" />
<span id="spanEl">some text</span>

import Copy from 'copy-util';

Copy({
    el: '#inputEl' // 使用选择器, 如果有多个dom只会取用第一个
});

Copy({
    el: document.getElementById('spanEl'), // 使用dom元素
    type: 'text' // 指定复制的类型
});

参数:

el: el 可以是选择器或者一个 dom 元素

type: type 表示要复制的类型，可选值有 value, text, html, src, href。默认值为 value

2.3. DOM 绑定

除了使用 api 方式调用copy-util之外，还可以绑定 DOM 使用，这样就可以无需编写 js 代码：

<input id="inputEl" />
<!--从某个dom元素复制内容-->
<button copy-el="#inputEl" copy-type="value">Copy from dom</button>
<!--直接复制文本-->
<button copy-text="some text">Copy text</button>

属性：

copy-el：与 2.2 中的参数 el 同样的含义

copy-type： 2.2 中的参数 type 同样的含义

copy-text：需要复制的文本，支持动态修改

2.4. Copy.init()

2.3 中绑定 DOM 默认会在 DOM 加载完成之后初始化相关元素和事件，但是在某些场景下（比如 vue 组件或是动态插入的 dom）会不起作用，此时只需要在 dom 加载完成之后手动调用 Copy.init() 即可完成初始化