Comment copier du contenu dans le presse-papiers dans JS

Cette fois, je vais vous montrer comment copier du contenu dans le presse-papiers avec JS. Quelles sont les précautions pour copier du contenu dans le presse-papiers avec JS. un cas pratique. Levez-vous et jetez un œil.

Méthodes courantes

Après vérification du tout-puissant Google, les méthodes courantes sont désormais principalement les deux suivantes :

Bibliothèque tierce : clipboard.js
Méthode native : document.execCommand()

Voyons comment ces deux méthodes sont utilisées.

clipboard.js

Ceci est le site officiel de clipboard : https://clipboardjs.com/, cela semble si simple.

Citation

Citation directe :

Forfait :

, puis

;

npm install clipboard --save import Clipboard from 'clipboard'Utiliser

Copier depuis la zone de saisie Maintenant qu'il y a une balise <input> sur la page, nous devons copier le contenu à l'intérieur, nous pouvons faire ceci :

Notez qu'un attribut

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

est ajouté à la balise

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

et que sa valeur est le

du <button></button> qui doit être copié. Comme son nom l'indique, le contenu est copié à partir de la balise entière. data-clipboard-target <input> idCopier directement

Parfois, nous ne souhaitons pas copier le contenu de <input>, mais simplement obtenir la valeur directement à partir de la variable. Si dans Vue on pouvait faire ça :

Cliquez sur moi pour copier

Événement

Parfois, nous devons faire quelque chose après la copie, auquel cas nous avons besoin du support de la

fonction de rappel

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

.

Ajoutez le code suivant à la fonction de traitement :

Résumé

Le document mentionne également que si vous utilisez

sur une seule page, afin de rendre la gestion du

// 复制成功后执行的回调函数
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);
});

cycle de vie

plus élégante, pensez à détruire après utilisation.

Le presse-papiers n'est-il pas très simple à utiliser ? Cependant, n'est-il pas assez élégant d'utiliser des bibliothèques tierces supplémentaires uniquement pour une fonction de copie ? Utilisez ensuite des méthodes natives pour y parvenir.

clipboard Méthode document.execCommand()btn.destroy()

Voyons d'abord comment cette méthode est définie sur

 :

qui permet d'exécuter des commandes pour manipuler le contenu de la région modifiable

. Cela signifie que vous pouvez exécuter des commandes pour manipuler le contenu de la zone modifiable. Notez qu'il s'agit d'une zone modifiable. MDN

Définition

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)

La méthode renvoie une valeur booléenne indiquant si l'opération a réussi.

aCommandName : représente le nom de la commande, tel que : copier, couper, etc. (voir les commandes pour plus de commandes) ;

aShowDefaultUI : s'il faut afficher l'interface utilisateur, généralement

• aValueArgument : Certaines commandes nécessitent des paramètres supplémentaires, qui ne sont généralement pas utilisés

• Compatibilité

• La compatibilité de cette méthode n’était en fait pas très bonne auparavant, mais heureusement, elle est désormais fondamentalement compatible avec tous les navigateurs grand public et peut également être utilisée sur les terminaux mobiles.

Utiliser

从输入框复制
现在页面上有一个 <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回调函数的方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!