JavaScript copie le contenu dans le code d'implémentation du presse-papiers

<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.

Méthodes courantes

<p>J'ai vérifié le tout-puissant Google. Désormais, les méthodes courantes sont principalement les deux suivantes :

• <p>Bibliothèques tierces : clipboard.js

• <p>Méthode native : document.execCommand()

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

clipboard.js

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

Citer

<p> citation directe : <script src="dist/clipboard.min.js"></script>

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

utiliser

à partir de l'entrée Box Copy

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

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

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

<p> Notez que dans le Balise <button> Un attribut data-clipboard-target est ajouté et sa valeur est le <input> du id qui doit être copié. Comme son nom l'indique, le contenu est copié à partir de la balise entière.

Copier directement

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

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

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

Événement

<p>Parfois, nous devons faire quelque chose après la copie, nous avons alors besoin de la prise en charge de la fonction de rappel.

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

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

Résumé

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

<p>clipboardN'est-ce 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 copy Que devons-nous faire à ce stade ? Utilisez ensuite des méthodes natives pour y parvenir.

Méthode document.execCommand()

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

qui permet d'exécuter des commandes pour manipuler le contenu du 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 de la région modifiable.

Définition

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

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

• <p>aCommandName : Représente le nom de la commande, tel que : copy, cut, etc. (voir commandes pour plus de commandes

• <p> : Indique s'il faut afficher l'interface utilisateur, généralement aShowDefaultUI false

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

Compatibilité

La compatibilité de cette méthode n'était 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.

<p>

<p>Copiez le

de la zone de saisie en utilisant

Maintenant, il y a une balise

sur le page, nous voulons Pour copier le contenu, nous pouvons faire ceci : <p><input>

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

Copier ailleurs

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

Parfois il n'y a pas de balise

sur la page, nous devrons peut-être le faire copiez-le depuis un <p> Copiez le contenu dans ou copiez directement la variable. <input><p> Rappelons qu'il a été mentionné dans la définition de la méthode

qu'elle ne peut opérer que sur la <p>zone modifiable execCommand(), ce qui signifie qu'à l'exception des champs de saisie tels que et , cette méthode ne peut pas être utilisée. <input><textarea>En ce moment, nous devons sauver le pays.

<p>

<button id="btn">点我复制</button>

Cela peut être considéré comme un succès pour sauver le pays à travers une courbe. En utilisant cette méthode, j’ai rencontré plusieurs pièges.

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>Pièges rencontrés

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>

Lorsque vous cliquez sur copier, une gigue d'écran blanche apparaîtra en bas de l'écran. Si vous regardez attentivement, vous retirez le clavier et le rangez instantanément
1. Ce serait mieux si vous saviez ce qui cause la gigue résolue. Puisque le clavier est relevé, l'accent est mis sur le champ de saisie, il suffit donc de rendre le champ de saisie indisponible pour la saisie. Ajoutez <p> au code pour rendre ce
   en lecture seule, et le clavier ne sera pas relevé. . <p>input.setAttribute('readonly', 'readonly');<input>
   Ne peut pas être copié
<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);
})

相关推荐：

JS复制内容到剪切板的实例代码(兼容IE与火狐)_javascript技巧

jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板_jquery

JavaScript实现复制内容到粘贴板代码_javascript技巧

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!