常见的复制方法主要有两种:第三方库clipboardjs和原生方法document.execCommand()。下面分别介绍这两种方法的使用方法。
1. clipboard.js
clipboard.js是一个简单易用的第三方库,可以方便地实现复制功能。首先需要引入该库,可以通过以下方式之一进行引入:
- 直接引用:在HTML文件中添加以下代码:
```html
```
- 使用npm安装并导入:
```bash
npm install clipboard --save
import Clipboard from 'clipboard';
```
使用clipboard.js实现从输入框复制内容的方法如下:
```html
```
2. document.execCommand()
document.execCommand()是原生JavaScript方法,可以允许运行命令来操作可编辑区域的内容。使用方法如下:
- 定义一个函数,用于执行复制操作:
```javascript
function copyToClipboard(text) {
const textarea = document.createElement('textarea');
textarea.value = text;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
}
```
- 在需要复制的地方调用该函数:
```javascript
const textToCopy = '需要复制的文本';
copyToClipboard(textToCopy);
```
需要注意的是,document.execCommand()方法返回一个布尔值,表示操作是否成功。此外,该方法仅适用于可编辑区域的内容,对于一些特殊情况可能无法正常工作。
CommandName :表示命令名称,比如: copy, cut 等(更多命令见命令);
aShowDefaultUI:是否展示用户界面,一般情况下都是 false;
aValueArgument:有些命令需要额外的参数,一般用不到;
兼容性
这个方法在之前的兼容性其实是不太好的,但是好在现在已经基本兼容所有主流浏览器了,在移动端也可以使用。
使用
从输入框复制
现在页面上有一个 <input> 标签,我们想要复制其中的内容,我们可以这样做:
js代码
其它地方复制
execCommand()这时候我们需要曲线救国。
<button id="btn">点我复制</button>
js代码
算是曲线救国成功了吧。在使用这个方法时,遇到了几个坑。遇到的坑在Chrome下调试的时候,这个方法时完美运行的。然后到了移动端调试的时候,坑就出来了。对,没错,就是你,ios...
1、点击复制时屏幕下方会出现白屏抖动,仔细看是拉起键盘又瞬间收起知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘,那就是聚焦到了输入域,那只要让输入域不可输入就好了,在代码中添加 input.setAttribute('readonly', 'readonly'); 使这个 <input> 是只读的,就不会拉起键盘了。2、无法复制这个问题是由于 input.select() 在ios下并没有选中全部内容,我们需要使用另一个方法来选中内容,这个方法就是 input.setSelectionRange(0, input.value.length);。
完整代码如下:总结以上就是关于JavaScript如何实现复制内容到剪贴板,附上几个链接: