FireFox, Safari ve Chrome ile panoya metin kopyalayın / koyun

Internet Explorer'da panoya erişmek için clipboardData nesnesini kullanabilirim. Bunu FireFox, Safari ve / veya Chrome'da nasıl yapabilirim?

Artık çoğu modern tarayıcıda bunu kolayca yapmanın bir yolu var.

document.execCommand('copy');

Bu, şu anda seçili metni kopyalayacaktır. Kullanarak bir textArea veya giriş alanı seçebilirsiniz.

document.getElementById('myText').select();

Metni görünmez bir şekilde kopyalamak için hızlı bir şekilde bir textArea oluşturabilir, kutudaki metni değiştirebilir, seçebilir, kopyalayabilir ve ardından textArea öğesini silebilirsiniz. Çoğu durumda bu textArea ekranda bile yanıp sönmeyecektir.

Güvenlik nedenleriyle, tarayıcılar yalnızca bir kullanıcı bir tür eylemde bulunursa (örneğin bir düğmeyi tıklatırsa) kopyalamanıza izin verir. Bunu yapmanın bir yolu, metni kopyalayan bir yöntemi çağıran bir html düğmesine bir onClick olayı eklemektir.

Tam bir örnek:

function copier(){
  document.getElementById('myText').select();
  document.execCommand('copy');
}

<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>

Güvenlik nedeniyle Firefox, panoya metin yerleştirmenize izin vermez. Ancak, Flash kullanılarak kullanılabilen bir çözüm vardır.

function copyIntoClipboard(text) {

    var flashId = 'flashId-HKxmj5';

    /* Replace this with your clipboard.swf location */
    var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

    if(!document.getElementById(flashId)) {
        var div = document.createElement('div');
        div.id = flashId;
        document.body.appendChild(div);
    }
    document.getElementById(flashId).innerHTML = '';
    var content = '<embed src="' + 
        clipboardSWF +
        '" FlashVars="clipboard=' + encodeURIComponent(text) +
        '" width="0" height="0" type="application/x-shockwave-flash"></embed>';
    document.getElementById(flashId).innerHTML = content;
}

Tek dezavantajı, bunun Flash'ın etkinleştirilmesini gerektirmesidir.

kaynak şu anda ölü: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( ve böylece 's olan Google önbellek )

Çevrimiçi E-Tablolar Ctrl + C, Ctrl + V olaylarını kancalar ve odağı gizli bir TextArea denetimine aktarır ve içeriği kopyalamak için istenen yeni pano içeriğine ayarlar veya olay yapıştırma bittikten sonra içeriğini okur.

Ayrıca bkz . Panoyu Javascript kullanarak Firefox, Safari ve Chrome'da okumak mümkün mü?

Yaz 2015 ve Flash'ı çevreleyen çok fazla kargaşa ile bu soruya, kullanımını tamamen engelleyen yeni bir cevap ekleyeceğimi düşündüm.

clipboard.js , metin veya html verilerinin panoya kopyalanmasına izin veren güzel bir yardımcı programdır. Kullanımı çok kolaydır, sadece .js'yi ekleyin ve şuna benzer bir şey kullanın:

<button id='markup-copy'>Copy Button</button>

<script>
document.getElementById('markup-copy').addEventListener('click', function() {
  clipboard.copy({
    'text/plain': 'Markup text. Paste me into a rich text editor.',
    'text/html': '<i>here</i> is some <b>rich text</b>'
  }).then(
    function(){console.log('success'); },
    function(err){console.log('failure', err);
  });

});
</script>

clipboard.js de GitHub'da

2017'de bunu yapabilirsiniz (bunu söyleyerek bu konu neredeyse 9 yaşında!)

function copyStringToClipboard (string) {
    function handler (event){
        event.clipboardData.setData('text/plain', string);
        event.preventDefault();
        document.removeEventListener('copy', handler, true);
    }

    document.addEventListener('copy', handler, true);
    document.execCommand('copy');
}

Ve şimdi kopyalamak için copyStringToClipboard('Hello World')

setDataÇizgiyi fark ettiyseniz ve farklı veri türleri ayarlayıp ayarlayamayacağınızı merak ettiyseniz, cevap evettir.

Firefox, verileri panoda saklamanıza izin verir, ancak güvenlik etkileri nedeniyle varsayılan olarak devre dışı bırakılmıştır. "Panoya JavaScript erişimi verme" bölümünde bunu nasıl etkinleştireceğinizi öğrenin.Mozilla Firefox bilgi tabanındaki bölümünde .

Amdfan tarafından sunulan çözüm, çok sayıda kullanıcınız varsa ve tarayıcılarını yapılandırmak bir seçenek değilse en iyisidir. Bununla birlikte, panonun kullanılabilir olup olmadığını test edebilir ve kullanıcılar teknoloji konusunda bilgili ise ayarları değiştirmek için bir bağlantı sağlayabilirsiniz. JavaScript editörü TinyMCE bu yaklaşımı izler.

CopyIntoClipboard () işlevi Flash 9 için çalışıyor, ancak Flash player 10'un yayınlanmasıyla bozulmuş görünüyor. İşte yeni flash player ile çalışan bir çözüm:

http://bowser.macminicolo.net/~jhuckaby/zeroclipboard/

Bu karmaşık bir çözüm ama işe yarıyor.

Bu çözümlerden hiçbirinin gerçekten işe yaramadığını . Kabul edilen cevaptan pano çözümünü denedim ve Flash Player 10 ile çalışmıyor. ZeroClipboard'u da denedim ve bir süre ondan çok memnun kaldım.

Şu anda kendi sitemde kullanıyorum ( http://www.blogtrog.com ), ancak bununla ilgili tuhaf hatalar fark ettim. ZeroClipboard'un çalışma şekli, sayfanızdaki bir öğenin üstüne görünmez bir flash nesnesi koymasıdır. Öğem hareket ederse (örneğin, kullanıcı pencereyi yeniden boyutlandırdığında ve her şeyi doğru hizaladığımda), ZeroClipboard flash nesnesinin kaçtığını ve artık nesneyi örtmediğini buldum. Muhtemelen hala başlangıçta olduğu yerde oturduğundan şüpheleniyorum. Bunu durdurması veya öğeye yeniden yapıştırması gereken bir kodları var, ancak bu pek iyi çalışmıyor.

Öyleyse ... BlogTrog'un bir sonraki sürümünde, vahşi ortamda gördüğüm diğer tüm kod vurgulayıcıları takip edeceğim ve Panoya Kopyala düğmemi kaldıracağım. :-(

(Dp.syntaxhiglighter'ın Panoya Kopyasının da artık bozuk olduğunu fark ettim.)

çok eski bir soru ama bu cevabı hiçbir yerde görmedim ...

Bu bağlantıyı kontrol edin:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

Herkesin söylediği gibi, güvenlik nedeniyle varsayılan olarak devre dışı bırakılmıştır. yukarıdaki bağlantı, nasıl etkinleştirileceğine dair talimatları gösterir (about: config in firefox veya user.js'de düzenleyerek).

Neyse ki sadece birkaç tıklama ile işleri kolaylaştıran "AllowClipboardHelper" adlı bir eklenti var. ancak yine de web sitenizin ziyaretçilerine firefox'ta erişimi nasıl etkinleştirecekleri konusunda talimat vermeniz gerekir.

Modern document.execCommand ("copy") ve jQuery kullanın. Bu stackoverflow cevabına bakın

var ClipboardHelper = { // as Object

copyElement: function ($element)
{
   this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
    var $tempInput =  $("<textarea>");
    $("body").append($tempInput);
    $tempInput.val(text).select();
    document.execCommand("copy");
    $tempInput.remove();
}};

Nasıl aranır:

 ClipboardHelper.copyText('Hello\nWorld');
 ClipboardHelper.copyElement($('body h1').first());

// JQUERY DOCUMENT
;(function ( $, window, document, undefined ) {
  
  var ClipboardHelper = {

    copyElement: function ($element)
    {
       this.copyText($element.text())
    },
    copyText:function(text) // Linebreaks with \n
    {
        var $tempInput =  $("<textarea>");
        $("body").append($tempInput);
      
        //todo prepare Text: remove double whitespaces, trim
        
        $tempInput.val(text).select();
        document.execCommand("copy");
        $tempInput.remove();
    }
};

    $(document).ready(function()
    {
         var $body=$('body');
         
        $body.on('click', '*[data-copy-text-to-clipboard]', function(event) 
        {
            var $btn=$(this);
            var text=$btn.attr('data-copy-text-to-clipboard');
            ClipboardHelper.copyText(text);
        });
      
        $body.on('click', '.js-copy-element-to-clipboard', function(event) 
        {
            ClipboardHelper.copyElement($(this));
        });

    });


})( jQuery, window, document );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<span data-copy-text-to-clipboard=
"Hello
 World">
  Copy Text
</span>
<br><br>
<span class="js-copy-element-to-clipboard">
Hello
World 
Element
</span>

Gereksinimlerim için Github's Clippy'yi kullandım , basit Flash tabanlı düğme. Şekillendirmeye ihtiyaç duymuyorsa ve sunucu tarafına önceden yapıştırılacak şeyi yerleştirmekten memnunsa gayet iyi çalışıyor .

Flash çözümündeki küçük bir iyileştirme, swfobject kullanarak flash 10'u algılamaktır:

http://code.google.com/p/swfobject/

ve sonra flash 10 olarak görünüyorsa, javascript kullanarak bir Shockwave nesnesi yüklemeyi deneyin. Shockwave, panoya (tüm sürümlerde) ve ayrıca copyToClipboard () komutunu dilde kullanarak okuyabilir / yazabilir.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp , Flash 10 ve tüm Flash etkin tarayıcılarla çalışır.

Ayrıca ZeroClipboard, Flash filminin artık doğru yerde olmamasına neden olan sayfa kaydırmayla ilgili olarak bahsedilen hatayı önlemek için güncellendi.

Bu yöntem, kullanıcının kopyalamak için bir düğmeyi tıklamasını gerektirdiğinden, bu kullanıcı için bir kolaylıktır ve alçakça hiçbir şey meydana gelmez.

seçimi depolayan bir bellek global değişkeni oluşturmayı deneyin, ardından diğer işlev değişkene erişebilir ve örneğin yapıştırabilir ..

var memory = '';//outside the functions but within the script tag.

function moz_stringCopy(DOMEle,firstPos,secondPos) {

var copiedString = DOMEle.value.slice(firstPos, secondPos);
memory = copiedString;

}

function moz_stringPaste(DOMEle, newpos) {

    DOMEle.value = DOMEle.value.slice(0,newpos) + memory + DOMEle.value.slice(newpos);

}

Flash'ı destekliyorsanız metni ayarlamak için https://everyplay.com/assets/clipboard.swf ve flashvars metnini kullanabilirsiniz.

https://everyplay.com/assets/clipboard.swf?text=It%20Works

Kopyalamak için kullandığım budur ve aşağıdaki seçenekleri desteklemiyorsa ekstra olarak ayarlayabilirsiniz:

Internet Explorer için: window.clipboardData.setData (DataFormat, Text) ve window.clipboardData.getData (DataFormat)

GetData ve setData için DataFormat'ın Metnini ve Url'sini kullanabilirsiniz.

Ve verileri silmek için:

DataFormat Dosyası, HTML, Görüntü, Metin ve URL'yi kullanabilirsiniz. Not: window.clipboardData.clearData (DataFormat) Kullanmanız Gerekir;

Ayrıca window.clipboardData ve swf flash dosyalarını desteklemeyen diğer öğeler için, klavyenizdeki Ctrl + c düğmesini, Windows için ve Mac için command + c'yi de kullanabilirsiniz.

Eklenti kodundan:

Başka birinin Chrome kodundan nasıl yapılacağını araması durumunda, nsIClipboardHelper arayüzünü burada açıklandığı gibi kullanabilirsiniz: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

Kullanın document.execCommand('copy'). En son sürümlerinde desteklenen Chrome, Firefox, Edge, ve Safari.

function copyText(text){
  function selectElementText(element) {
    if (document.selection) {
      var range = document.body.createTextRange();
      range.moveToElementText(element);
      range.select();
    } else if (window.getSelection) {
      var range = document.createRange();
      range.selectNode(element);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    }
  }
  var element = document.createElement('DIV');
  element.textContent = text;
  document.body.appendChild(element);
  selectElementText(element);
  document.execCommand('copy');
  element.remove();
}


var txt = document.getElementById('txt');
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
  copyText(txt.value);
})

<input id="txt" value="Hello World!" />
<button id="btn">Copy To Clipboard</button>

Clipboard API , yerini alacak şekilde tasarlanmıştır document.execCommand. Safari hala destek üzerinde çalışıyor, bu nedenle teknik özellikler yerleşene ve Safari uygulaması bitene kadar bir geri dönüş sağlamalısınız.

const permalink = document.querySelector('[rel="bookmark"]');
const output = document.querySelector('output');
permalink.onclick = evt => {
  evt.preventDefault();
  window.navigator.clipboard.writeText(
    permalink.href
  ).then(() => {
    output.textContent = 'Copied';
  }, () => {
    output.textContent = 'Not copied';
  });
};

<a href="/programming/127040/" rel="bookmark">Permalink</a>
<output></output>

Güvenlik nedeniyle panodan Permissionsokumak ve yazmak için pano gerekebilir. Snippet, SO üzerinde çalışmazsa, ona bir şans verin localhostveya başka türlü güvenilen bir alan adı verin.

Studio.201'den @David'in mükemmel cevabından yola çıkarak bu, Safari, FF ve Chrome'da çalışır. Ayrıca textareaekran dışına yerleştirerek de yanıp sönme olmamasını sağlar .

// ================================================================================
// ClipboardClass
// ================================================================================
var ClipboardClass = (function() {


   function copyText(text) {
    // Create temp element off-screen to hold text.
        var tempElem = $('<textarea style="position: absolute; top: -8888px; left: -8888px">');
        $("body").append(tempElem);

        tempElem.val(text).select();
        document.execCommand("copy");
        tempElem.remove();
   }


    // ============================================================================
   // Class API
   // ============================================================================
    return {
        copyText: copyText
    };
})();