JS에서 콘텐츠를 클립보드에 복사하는 방법

이번에는 JS를 사용하여 클립보드에 콘텐츠를 복사하는 방법과 JS를 사용하여 클립보드에 콘텐츠를 복사할 때 주의사항에 대해 설명하겠습니다.

일반적인 방법

막강한 Google을 확인한 결과 현재 일반적인 방법은 주로 다음 두 가지입니다.

타사 라이브러리:clipboard.js
네이티브 메서드: document.execCommand()

이 두 가지 방법이 어떻게 사용되는지 살펴보겠습니다.

clipboard.js

이것은 클립보드 공식 웹사이트입니다: https://clipboardjs.com/, 정말 간단해 보입니다.

인용

직접 인용:

패키지: npm install clipsboard --save , 그런 다음 'clipboard'에서 클립보드 가져오기;npm install clipboard --save ，然后 import Clipboard from 'clipboard';

使用

从输入框复制
现在页面上有一个 <input> 标签，我们需要复制其中的内容，我们可以这样做：

<input>
<button>点我复制</button>

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');

注意到，在 <button></button> 标签中添加了一个 data-clipboard-target 属性，它的值是需要复制的 <input> 的 id，顾名思义是从整个标签中复制内容。

直接复制

有的时候，我们并不希望从 <input> 中复制内容，仅仅是直接从变量中取值。如果在 Vue 中我们可以这样做：

点我复制

import Clipboard from 'clipboard';
const btnCopy = new Clipboard('btn');
this.copyValue = 'hello world';

事件

有的时候我们需要在复制后做一些事情，这时候就需要回调函数的支持。

在处理函数中加入以下代码：

// 复制成功后执行的回调函数
clipboard.on('success', function(e) {
 console.info('Action:', e.action); // 动作名称，比如：Action: copy
 console.info('Text:', e.text); // 内容，比如：Text：hello word
 console.info('Trigger:', e.trigger); // 触发元素：比如：<button>点我复制</button>
 e.clearSelection(); // 清除选中内容
});
// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

小结

文档中还提到，如果在单页面中使用 clipboard ，为了使得生命周期管理更加的优雅，在使用完之后记得 btn.destroy() 销毁一下。

clipboard 使用起来是不是很简单。但是，就为了一个 copy 功能就使用额外的第三方库是不是不够优雅，这时候该怎么办？那就用原生方法实现呗。

document.execCommand()方法

先看看这个方法在 MDN

사용

입력 상자에서 복사

이제 페이지에 <input> 태그가 있으므로 그 안에 있는 콘텐츠를 복사해야 합니다. 다음과 같이 하세요.

<input>
<button>点我复制</button>

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
	const input = document.querySelector('#demoInput');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
})

data-clipboard-target 속성이 <button></button> 태그에 추가되고 해당 값을 <input> 복사해야 합니다. id of code>는 이름에서 알 수 있듯이 전체 태그에서 콘텐츠를 복사합니다.

직접 복사

때로는 <input>에서 내용을 복사하지 않고 변수에서 직접 값을 가져오고 싶을 때도 있습니다. Vue에서 다음을 수행할 수 있습니다.

• 복사하려면 클릭하세요

  const btn = document.querySelector('#btn');
  btn.addEventListener('click',() => {
  	const input = document.createElement('input');
  	document.body.appendChild(input);
   	input.setAttribute('value', '听说你想复制我');
  	input.select();
  	if (document.execCommand('copy')) {
  		document.execCommand('copy');
  		console.log('复制成功');
  	}
   document.body.removeChild(input);
  })

• 이벤트<p></p>
복사한 후 뭔가를 해야 할 때가 있습니다. 이때 콜백 함수
• 의 지원이 필요합니다. <p></p> 핸들러 함수에 다음 코드를 추가합니다:

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
 input.setAttribute('readonly', 'readonly');
 input.setAttribute('value', 'hello world');
 document.body.appendChild(input);
	input.setSelectionRange(0, 9999);
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
 document.body.removeChild(input);
})

요약

문서에는 또한 단일 페이지에서 클립보드를 사용하면 라이프 사이클 관리가 더 우아해졌습니다. 사용 후 btn.destroy() 파기해야 한다는 점을 기억하세요.

클립보드는 사용하기 매우 간단하지 않나요? 하지만 복사 기능만을 위해 추가 타사 라이브러리를 사용하는 것만으로는 충분하지 않습니까? 그런 다음 기본 방법을 사용하여 이를 달성합니다.

document.execCommand() 메서드

먼저 MDN에서 이 메서드가 어떻게 정의되어 있는지 살펴보겠습니다. 🎜🎜 🎜 🎜🎜🎜 명령을 실행하여 편집 가능 영역의 내용을 조작할 수 있습니다. 이는 편집 가능 영역의 내용을 조작하기 위해 명령을 실행할 수 있음을 의미합니다. 🎜🎜 정의 🎜🎜 🎜 bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 🎜🎜🎜 이 메서드는 작업이 성공했는지 여부를 나타내는 부울 값을 반환합니다. 🎜🎜🎜🎜 aCommandName: 복사, 잘라내기 등의 명령 이름을 나타냅니다. (자세한 명령은 명령 참조) 🎜🎜🎜aShowDefaultUI: 사용자 인터페이스 표시 여부, 일반적으로 false 🎜🎜🎜🎜aValueArgument: 일부 명령에는 추가 매개변수가 필요합니다. , 일반적으로 사용되지 않습니다. 🎜🎜🎜🎜🎜 🎜호환성🎜🎜🎜 사실 이 방식의 호환성은 이전에는 그다지 좋지 않았지만, 다행스럽게도 현재는 기본적으로 모든 주류 브라우저와 호환되며 모바일 단말기에서도 사용할 수 있습니다. 🎜🎜 🎜🎜 🎜사용 🎜🎜

从输入框复制
现在页面上有一个 <input> 标签，我们想要复制其中的内容，我们可以这样做：

<input>
<button>点我复制</button>

js代码

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
	const input = document.querySelector('#demoInput');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
})

其它地方复制

有的时候页面上并没有 <input> 标签，我们可能需要从一个 <p></p> 中复制内容，或者直接复制变量。

还记得在 execCommand() 方法的定义中提到，它只能操作可编辑区域，也就是意味着除了 <input>、 这样的输入域以外，是无法使用这个方法的。

这时候我们需要曲线救国。

点我复制

js代码

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
	document.body.appendChild(input);
 	input.setAttribute('value', '听说你想复制我');
	input.select();
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
 document.body.removeChild(input);
})

算是曲线救国成功了吧。在使用这个方法时，遇到了几个坑。

遇到的坑

在Chrome下调试的时候，这个方法时完美运行的。然后到了移动端调试的时候，坑就出来了。

对，没错，就是你，ios。。。

1、点击复制时屏幕下方会出现白屏抖动，仔细看是拉起键盘又瞬间收起

知道了抖动是由于什么产生的就比较好解决了。既然是拉起键盘，那就是聚焦到了输入域，那只要让输入域不可输入就好了，在代码中添加 input.setAttribute('readonly', 'readonly'); 使这个 <input> 是只读的，就不会拉起键盘了。

2、无法复制

这个问题是由于 input.select() 在ios下并没有选中全部内容，我们需要使用另一个方法来选中内容，这个方法就是 input.setSelectionRange(0, input.value.length);。

完整代码如下：

const btn = document.querySelector('#btn');
btn.addEventListener('click',() => {
	const input = document.createElement('input');
 input.setAttribute('readonly', 'readonly');
 input.setAttribute('value', 'hello world');
 document.body.appendChild(input);
	input.setSelectionRange(0, 9999);
	if (document.execCommand('copy')) {
		document.execCommand('copy');
		console.log('复制成功');
	}
 document.body.removeChild(input);
})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

angularjs中获取单选按钮的方法

脚本加载后执行JS回调函数的方法

위 내용은 JS에서 콘텐츠를 클립보드에 복사하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!