Exemple de code d'opération de copie H5

Au début, il n'y avait aucun contenu accessible à clipborad sur le web. Dans le passé, nous ne pouvions utiliser Flash que si nous souhaitions effectuer un copier/coller/couper. Mais voilà, le grand H5 ou W3C a lancé une ébauche sur le presse-papier de contrôle du H5. Les plus connues sont les deux API :

document.execCommand()
ClipboardEvent

Découvrons-les étape par étape. Examinons d’abord l’utilisation du classique execCommand.

Opération de copie

copie d'entrée

Nous devons d'abord comprendre le processus de copie de base :

sélectionner

Copier ( command + c || ctrl + c)

execCommand suit également ce processus pour obtenir cet effet. Si nous voulons utiliser execCommand pour effectuer une copie, nous devons d'abord sélectionner l'élément que vous souhaitez copier.
Ici, une nouvelle API, window.getSelection(), sera également utilisée. Plus précisément :

getSelection() : utilisé pour obtenir le contenu de l'élément actuellement sélectionné. De manière générale, vous utilisez la souris pour sélectionner le contenu de la page.

toString() : Utilisé pour changer directement le contenu sélectionné en texte.

L'utilisation de base est :

// Afficher le texte sélectionné

window.getSelection().toString();

Nous utilisons généralement cette API uniquement pour les fonctions auxiliaires. L'approche la plus courante consiste à créer dynamiquement des éléments d'entrée, puis à spécifier dynamiquement input[value]. Exécutez select(), select, puis exécutez copy.

# Le code total est

function copyContent(elementId) {
  // 动态创建 input 元素
  var aux = document.createElement("input");
  // 获得需要复制的内容
  aux.
set
Attribute("value", document.getElementById(elementId).innerHTML);
  // 添加到 DOM 元素中
  document.body.app
end
Child(aux);
  // 执行选中
  // 注意: 只有 input 和 textarea 可以执行 select() 方法.
  aux.select();
  
  // 获得选中的内容
    var content = window.getSelection().toString();
    
  // 执行复制命令
  document.execCommand("copy");
  // 将 input 元素移除
  document.body.removeChild(aux);
}

Regardez un exemple

Copiez-le comme vous le souhaitez

Bien sûr, si vous ne le faites pas Si vous ne souhaitez pas ajouter des éléments d'entrée de manière dynamique, si vous souhaitez copier directement l'élément DOM spécifié, que devez-vous faire ? Ici, vous devez utiliser la méthode liée à createRange() nouvellement fournie par HTML5. Bien sûr, getSelection() ci-dessus en fait également partie. Les API utilisées sont :

document.createRange() : utilisée pour créer un conteneur sélectionné. Renvoie une plage Objet. La compatibilité de cette API est également très bonne et elle est prise en charge aussi bien par les téléphones mobiles que par les PC.

selectNode(DOM) : renvoie la méthode montée sur l'objet de plage. Utilisé pour ajouter des éléments sélectionnés. Un seul

window.getSelection()

addRange(range) peut être ajouté : cette méthode est montée sous la méthode getSelection() et est utilisée pour effectuer la sélection d'éléments. (! Très important)

C'est toute l'API ci-dessus :

Regardez simplement la démo

Ici, je posterai le code clé :

  var copyDOM = document.querySelector('#selector');  
  var range = document.createRange();  
  // 选中需要复制的节点
  range.selectNode(copyDOM);
  // 执行选中元素
  window.getSelection().addRange(range);
  // 执行 copy 操作
var successful = document.execCommand('copy');  
  try {  
    var msg = successful ? 'successful' : 'unsuccessful';  
    console.log('copy is' + msg);  
  } catch(err) {  
    console.log('Oops, unable to copy');  
  }
// 移除选中的元素
  window.getSelection().remove
All
Ranges();

Un rappel supplémentaire ici est que l'opération de copie ci-dessus ne peut pas être effectuée automatiquement. Autrement dit, les comportements interactifs tels que la copie ne peuvent pas être exécutés sans aucune interaction de l'utilisateur. Par conséquent, l'événement click doit être utilisé ici (bien sûr, vous pouvez également utiliser d'autres événements à la place).

Utiliser le presse-papiers pour copier

Tout d'abord, le presse-papiers a été proposé récemment, sa compatibilité a donc encore besoin de temps pour être vérifiée. La compatibilité actuelle consiste à prendre en charge certains événements simples.
Si votre navigateur prend en charge le constructeur ClipboardEvent. L’opération de copie devient alors extrêmement simple.

// Bien entendu, le code suivant doit être placé en cas de clic d'une interaction.

var copyEvent = 
new
 ClipboardEvent('copy', {
            dataType: 'text/plain',
            data: 'My string'
        });
        document.dispatchEvent(copyEvent);

Sinon, vous ne pouvez utiliser que l'API event.clipboardData renvoyée dans l'événement de copie du document pour définir ou obtenir les informations pertinentes. Nous obtenons l'objet clipboardData uniquement via des rappels d'événements :

e.clipboardData : ne peut être obtenu que via l'événement copier/coller/couper sur le document

document.addEvent
List
ener('copy', function(e){
    // 设置信息，实现复制
    e.clipboardData.setData('text/plain', 'Hello, world!');
    e.
prev
entDefault(); 
});

clipboardData : Cet obj monte également deux API couramment utilisées au format

 : qui est le type MIME de base. Le plus couramment utilisé est text/plain. Pour un contenu spécifique, veuillez vous référer aux références MIME

data : Il s'agit du contenu de données spécifique inséré correspondant au type MIME

setData(format, data) : Définir les informations de données associées, principalement utilisées pour copier et couper les événements liés.

getData(format) : Généralement utilisé dans les événements de collage. Utilisé pour obtenir le contenu du presse-papiers. Cependant, vous devez définir le format de décodage correct (c'est-à-dire définir le type MIME correct). De plus, cette méthode ne peut être utilisée que dans l’événement Paste.

Ce qui précède semble être une brève introduction à l'API, puis je parlerai formellement de quelques informations pratiques. Si vous utilisez clipboardData pour implémenter un contenu de copie personnalisé. De cette façon, vous pouvez non seulement copier du texte simple sur la page, mais également copier des imagesinformations, etc.

Regardez le code

// Lier les événements interactifs sur le DOM spécifié

DOM.addEventListener('click',function(){},false){
    // 添加 copy 内容
    document.addEventListener('copy',function copy (e) {
            msg = `<${msg}/>`;
            e.clipboardData.setData(&#39;text/plain&#39;, msg);
            e.preventDefault();
        })
    // 执行 copy 命令
    document.execCommand(&#39;copy&#39;);
    // 移除绑定事件
    document.removeEventListener(&#39;copy&#39;,&#39;copy&#39;);
}

couper et coller Related

Il semble également comme avant Assez simple. Bien sûr, certains étudiants peuvent se demander : n’existe-t-il pas d’autres événements tels que le copier-coller ? Est-il possible de faire la même chose ?
Euh...
Au début, je le pensais aussi, mais la réalité te donne souvent une douce caresse. Parce que, afin de vous empêcher d'obtenir des informations utilisateur de manière malveillante, dans Chrome, d'une manière générale, vous ne pouvez pas déclencher l'événement coller via document.execCommand('paste'). Cependant, dans la version mobile, la règle est que vous pouvez déclencher le copier-coller dans les éléments modifiables, mais la copie ne peut être déclenchée que dans les éléments sélectionnés valides.

根据上面的说法，我们可以通过利用 paste 的相关方法，来具体应用到实践中。比如，防止用户粘贴信息。这特别适用于那些做题页面，防止你查资料然后 copy 相关答案。

document.addEventListener('paste',function copy (e) {            e.preventDefault();        });
当然，还有更狠的，直接禁止 copy，paste，cut 事件。
['cut', 'copy', 'paste'].forEach((event)=>{    document.addEventListener(event, (e)=>{        e.preventDefault();    });});

方案总结

HTML5 现在能完美提供给我们的应该就是 copy 事件的使用，对于市面上的 clipboard.js 差不多也是运用上述的知识点。根据上面的描述，可以了解到，想要实现复制功能有三种渐进退化方案。以下兼容性由高到低：

input 模式

createRange

clipboard 直接操作

现在 React 比较火，这里我简单的写了一个 copybtn 组件。具体的使用 README 已经写清楚了，如果有什么不懂的地方可以 @我。

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

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!