Copier jQuery dans le presse-papiers 4 options

Cet article explore quatre méthodes JQuery et JavaScript pour l'automatisation de la copie du presse-papiers: Zclip, le presse-papiers zéro, une solution de contournement de texte et une méthode d'un didacticiel David Walsh. Chaque approche offre des forces et des faiblesses uniques, ce qui rend un peu plus adapté à des situations spécifiques.

L'auteur recommande la solution de contournement du texte de copie en raison de sa simplicité relative par rapport aux autres options de plugin.

Il est crucial de noter que la copie du presse-papiers est réalisable sans jQuery, en utilisant un javascript pur. Cependant, la compatibilité des navigateurs peut être un problème, car document.execCommand('copy') manque de soutien universel. Des alternatives comme la bibliothèque de presse-papiers.js ou l'API du presse-papiers offrent une meilleure compatibilité des navigateurs.

Mon expérience aujourd'hui impliquait d'utiliser jQuery (et JavaScript simple) pour automatiser la copie du presse-papiers - une tâche facilement accomplie via le clic droit & gt; Copier ou Ctrl C. Généralement, la méthode

gère cela, mais elle semble fonctionner uniquement dans Internet Explorer. Une solution de contournement consiste à utiliser un fichier Flash SWF. Plusieurs plugins jQuery existent et j'ai identifié quatre options: execCommand('copy')

1. zclip: Ce plugin fonctionne uniquement avec des hyperliens. Sa fonctionnalité principale (pour IE uniquement) est indiquée ci-dessous:

function copy(str) {
    //for IE ONLY!
    window.clipboardData.setData('Text', str);
}

2. Navette zéro: Un plugin de presse-papiers robuste (lien de téléchargement omis pour la concision). Un extrait de son utilisation:

function init() {
    clip = new ZeroClipboard.Client();
    clip.setHandCursor(true);
    clip.addEventListener('load', my_load);
    clip.addEventListener('mouseOver', my_mouse_over);
    clip.addEventListener('complete', my_complete);
    clip.glue('d_clip_button');
}

3. Copier la solution de contournement du texte: Cette méthode offre une approche plus simple.

Code jQuery:

$(document).ready(function(){
    $('li').live('click', function(){
        var path = $('#pathtonode').html();
        path = path.replace(/ > /g,".");
        addtoppath(path);
    });
    $('#toppathwrap').hide();

    function addtoppath(path) {
        $('#copypath').val(path);
        $('#toppathwrap').show();
        $('#copypath').focus();
        $('#copypath').select();
    }   
});

$('#copypath', 'body')
    .find('a')
        .livequery('click', function() {
            $(this).blur();
            var nodetext = $('#id-of-element-to-copy').html();
            $('#copypath input').focus();
            $('#copypath input').select();
            return false;
        });

CODE HTML:

<div id="toppathwrap">
    <input type="text" id="copypath">
</div>

Code CSS:

#toppathwrap { position:fixed; top:0px; right:0px; background-color:#F2F1E8; padding:5px; display:none; }

4. Méthode du didacticiel de David Walsh: Cette méthode utilise une fonction JavaScript et potentiellement un composant flash pour une compatibilité plus large.

function copy(inElement) {
  if (inElement.createTextRange) {
    var range = inElement.createTextRange();
    if (range && BodyLoaded==1)
     range.execCommand('Copy');
  } else {
    var flashcopier = 'flashcopier';
    if(!document.getElementById(flashcopier)) {
      var divholder = document.createElement('div');
      divholder.id = flashcopier;
      document.body.appendChild(divholder);
    }
    document.getElementById(flashcopier).innerHTML = '';
    var divinfo = '<embed flashvars="clipboard='+escape(inElement.value)+'" height="0" src="_clipboard.swf" type="application/x-shockwave-flash" width="0"></embed>';
    document.getElementById(flashcopier).innerHTML = divinfo;
  }
}

(Remarque: les liens source sont omis pour la concision mais étaient présents dans l'entrée d'origine.)

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!