salinan jQuery ke clipboard 4 pilihan

Artikel ini meneroka empat kaedah jQuery dan JavaScript untuk mengautomasikan clipboard menyalin: ZCLIP, sifar clipboard, penyelesaian teks salinan, dan kaedah dari tutorial David Walsh. Setiap pendekatan menawarkan kekuatan dan kelemahan yang unik, menjadikan beberapa lebih sesuai untuk situasi tertentu.

Penulis mengesyorkan penyelesaian teks salinan kerana kesederhanaan relatifnya berbanding dengan pilihan plugin yang lain.

Sangat penting untuk diperhatikan bahawa penyalinan papan klip boleh dicapai tanpa jQuery, menggunakan JavaScript tulen. Walau bagaimanapun, keserasian penyemak imbas boleh menjadi masalah, kerana document.execCommand('copy') tidak mempunyai sokongan sejagat. Alternatif seperti perpustakaan clipboard.js atau API clipboard memberikan keserasian penyemak imbas yang lebih baik.

Eksperimen saya hari ini terlibat menggunakan jQuery (dan javascript biasa) untuk mengautomasikan salinan papan klip-tugas yang mudah dicapai melalui klik kanan & gt; Salin atau Ctrl C. Secara amnya, kaedah

mengendalikan ini, tetapi nampaknya hanya berfungsi di Internet Explorer. Penyelesaian melibatkan menggunakan fail SWF Flash. Beberapa plugin jQuery wujud, dan saya telah mengenal pasti empat pilihan: execCommand('copy')

1. ZCLIP: Plugin ini berfungsi semata -mata dengan hiperpautan. Fungsi terasnya (untuk IE sahaja) ditunjukkan di bawah:

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

2. sifar clipboard: Plugin papan klip yang mantap (muat turun pautan yang ditinggalkan untuk brevity). Coretan penggunaannya:

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. salinan Teks Penyelesaian: Kaedah ini menawarkan pendekatan yang lebih mudah. ​​

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

kod html:

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

kod CSS:

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

Kaedah tutorial David Walsh:

Kaedah ini menggunakan fungsi JavaScript dan berpotensi komponen flash untuk keserasian yang lebih luas.
(Nota: Pautan sumber ditinggalkan untuk keringkasan tetapi hadir dalam input asal.)

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

Atas ialah kandungan terperinci salinan jQuery ke clipboard 4 pilihan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!