Comment copier du contenu dans le presse-papiers en JavaScript

<p>Il y a une petite exigence dans une page d'événement récent. Les utilisateurs peuvent cliquer ou appuyer longuement pour copier le contenu dans le presse-papiers et enregistrer le processus de mise en œuvre et les pièges rencontrés. Les amis dans le besoin peuvent s'y référer

<p>. Méthodes courantes

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

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

<p> Voyons comment ces deux méthodes sont utilisées.

<p>clipboard.js

<p>Voici le site officiel de clipboard : https://clipboardjs.com/, cela semble si simple.

<p>Citation

<p> Citation directe :

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

<p> Forfait : npm install clipboard --save , puis import Clipboard from 'clipboard';

<p> Copier depuis la zone de saisie en utilisant

<p> Il y a maintenant une balise <input> sur la page et nous devons copier le contenu à l'intérieur, nous pouvons le faire :

<input id="demoInput" value="hello world">
<button class="btn" data-clipboard-target="#demoInput">点我复制</button>

<p>

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

<p>

Notez qu'un attribut <p> est ajouté à la balise <button> et que sa valeur doit être copié data-clipboard-target <input>, comme son nom l'indique, copie le contenu de la balise entière. id

<p>Copier directement

Parfois, nous ne voulons pas copier le contenu de <input>, mais simplement obtenir la valeur directement de la variable. Si nous pouvons faire cela dans Vue : <p>

<button class="btn" :data-clipboard-text="copyValue">点我复制</button>

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

<p>

<p>Événement

Parfois, nous devons faites quelque chose après la copie, et vous avez alors besoin de la prise en charge d'une fonction de rappel. <p>

Ajoutez le code suivant à la fonction de traitement : <p>

// 复制成功后执行的回调函数
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 class="btn" :data-clipboard-text="copyValue">点我复制</button>
 e.clearSelection(); // 清除选中内容
});

// 复制失败后执行的回调函数
clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
});

<p>

<p>Résumé

Dans le document Il a également été mentionné que si vous utilisez <p> sur une seule page, afin de rendre la gestion du cycle de vie plus élégante, pensez à détruire clipboard après utilisation. btn.destroy()

Le Presse-papiers est 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. <p>

<p>Méthode document.execCommand()

Regardez d'abord comment cette méthode est définie sur <p> : MDN

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

signifie que des commandes peuvent être exécutées pour manipuler le contenu de la région modifiable. Notez qu'il s'agit d'une région modifiable. <p>

Définition<p>

bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)<p>

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

• aCommandName : indique le nom de la commande, tel que : copier, couper, etc. (voir commandes pour plus de commandes) ; <p>

• aShowDefaultUI : S'il faut afficher l'interface utilisateur, généralement faux ; <p>

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

<🎜 ; > Sexe compatible<p>La compatibilité de cette méthode n'était effectivement pas très bonne auparavant, mais heureusement, elle est désormais fondamentalement compatible avec tous les principaux navigateurs et peut également être utilisée sur les terminaux mobiles.

<p>

<p>

Copier depuis la zone de saisie en utilisant <p>

Il y a maintenant une balise <input> à copier Pour le contenu, on peut faire ceci : <p>

<input id="demoInput" value="hello world">
<button id="btn">点我复制</button>

<p>code js

<p>

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

<p>

Copier ailleurs<p>Parfois il n'y a pas de balise

sur la page, nous pouvons avoir besoin de copier le contenu d'un <p>, ou de copier la variable directement. <input><p> N'oubliez pas qu'il a été mentionné dans la définition de la méthode

qu'elle ne peut fonctionner que sur des zones modifiables, ce qui signifie qu'elle ne peut être utilisée que pour les champs de saisie tels que <input> ; Cette méthode. <p>execCommand() En ce moment, nous devons sauver le pays.

<p>Cliquez sur moi pour copier

<p>code js

<p>

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>Cela peut être considéré comme un moyen efficace de sauver le pays. Plusieurs écueils ont été rencontrés lors de l’utilisation de cette méthode.

<p>

Pièges rencontrés<p>Lors du débogage sous Chrome, cette méthode fonctionne parfaitement. Puis, lorsqu’il s’est agi de déboguer le terminal mobile, le gouffre est sorti.

<p>Oui, c'est vrai, c'est toi, ios. . .

<p>

1. Lorsque vous cliquez sur copier, une gigue d'écran blanche apparaîtra en bas de l'écran. Si vous regardez attentivement, vous pouvez retirer le clavier et le ranger instantanément <p><🎜. >Vous saurez ce qui cause la gigue. C'est plus facile à résoudre. Puisque le clavier est relevé, l'accent est mis sur le champ de saisie. Ensuite, rendez simplement le champ de saisie indisponible pour la saisie. Ajoutez input.setAttribute('readonly', 'readonly'); au code pour que ce <input> -seulement Oui, cela ne fera pas apparaître le clavier.

<p>2. Impossible de copier

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

<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);
})

<p>

<p>上面是我整理给大家的，希望今后会对大家有帮助。

<p>相关文章：

<p>详细讲解使用Node.js写一个简单的命令行工具（详细教程）

<p>在Node.js中使用cheerio制作简单的网页爬虫（详细教程）

<p>在vue中如何实现父组件向子组件传递多个数据

<p>

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!