Soru JavaScript’e nasıl panoya kopyalarım?


Metni panoya kopyalamanın en iyi yolu nedir? (Çoklu tarayıcı)

Denedim:

function copyToClipboard(text) {
    if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData("Text", text);
    } else {  
        unsafeWindow.netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");  
        const clipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].getService(Components.interfaces.nsIClipboardHelper);  
        clipboardHelper.copyString(text);
    }
}

ancak Internet Explorer'da bir sözdizimi hatası veriyor. Firefox'ta diyor ki unsafeWindow is not defined.

Flaşsız güzel bir hile: Trello, kullanıcının panosuna nasıl erişir?


2670
2017-12-30 13:09


Menşei


Özel birşey yok. Bunu kendi başlarına yapabilirler ancak metnin doğru bölümünü seçmekten endişe etmeden bir düğmeyi tıklatma olasılığını da sunmak istiyorum. - Santiago Corredoira
olası kopyası Panoya FireFox, Safari ve Chrome ile metin koyun - GvS
Bu uzun blog yayınının yapması için birçok yol var: Sistem Panosuna JavaScript ile Erişmek - Kutsal Bir Kase mi? - Aaron Digulla
IE'de ve FF'de tarayıcı tanımlanmamış istisna veriyor - Jagadeesh
Kullanıcının panosuna metin koyabilirsek, panosunu mahvedebiliriz. - Frank Fang


Cevaplar:


genel bakış

Panoya kopyalamak için 3 birincil tarayıcı API'sı vardır:

  1. Async Clipboard API'sı  [navigator.clipboard.writeText]
    • Metin odaklı bölüm mevcut Chrome 66 (Mart 2018)
    • Erişim eşzamansızdır ve JavaScript Sözleriyazılabilir, böylece güvenlik kullanıcı komutları (görüntüleniyorsa) sayfada JavaScript'i durdurmaz.
    • Metin doğrudan bir değişkenden panoya kopyalanabilir.
    • Sadece HTTPS üzerinden sunulan sayfalarda desteklenir.
    • Chrome'da, etkin sekmelerdeki 66 sayfa, bir izin istemi olmadan panoya yazabilir.
  2. document.execCommand('copy')
    • Çoğu tarayıcı bunu ~ Nisan 2015 itibarıyla desteklemektedir (aşağıdaki Tarayıcı Desteği bölümüne bakınız).
    • Erişim eşzamanlıdır, yani görüntüleme ve kullanıcı herhangi bir güvenlik istemiyle etkileşimde bulunmadan tamamlanana kadar sayfadaki JavaScript'i durdurur.
    • Metin DOM'dan okunur ve panoya yerleştirilir.
    • Test sırasında ~ Nisan 2015 sadece Internet Explorer panoya yazarken izin mesajları görüntüleniyor olarak kaydedildi.
  3. Kopyalama olayını geçersiz kılma
    • Pano API'sı belgelerine bakın Kopyalama olayını geçersiz kılma.
    • Herhangi bir kopyalama etkinliğinden panoda görünenleri değiştirmenize izin verir, düz metin dışındaki diğer veri biçimlerini içerebilir.
    • Soruyu doğrudan cevaplamadığı için burada ele alınmaz.

Genel gelişim notları

Konsolda kodu test ederken panoya ilişkin komutların çalışmasını beklemeyin. Genel olarak sayfanın aktif olması (Async Clipboard API) veya izin vermek için kullanıcı etkileşimi (örneğin bir kullanıcı tıklaması) gerekir.document.execCommand('copy')Daha fazla detay için panoya erişmek için aşağıya bakın.

Async + Fallback

Yeni Async Clipboard API'sı için tarayıcı desteği düzeyi nedeniyle büyük olasılıkla document.execCommand('copy') iyi tarayıcı kapsama almak için yöntem.

İşte basit bir örnek:

function fallbackCopyTextToClipboard(text) {
  var textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Fallback: Copying text command was ' + msg);
  } catch (err) {
    console.error('Fallback: Oops, unable to copy', err);
  }

  document.body.removeChild(textArea);
}
function copyTextToClipboard(text) {
  if (!navigator.clipboard) {
    fallbackCopyTextToClipboard(text);
    return;
  }
  navigator.clipboard.writeText(text).then(function() {
    console.log('Async: Copying to clipboard was successful!');
  }, function(err) {
    console.error('Async: Could not copy text: ', err);
  });
}

var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
  
  </textarea>
</div>

Bu parçacığın StackOverflow'un yerleşik önizlemesinde iyi çalışmadığını unutmayın. Buradan deneyebilirsiniz: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011

Async Clipboard API'sı

Chrome 66'daki izinler API'sı aracılığıyla "izin isteme" ve panoya erişimi test etme yeteneği olduğunu unutmayın.

var text = "Example text to appear on clipboard";
navigator.clipboard.writeText(text).then(function() {
  console.log('Async: Copying to clipboard was successful!');
}, function(err) {
  console.error('Async: Could not copy text: ', err);
});

document.execCommand ( 'kopya')

Bu yazının geri kalanı nüanslara ve detaylarına gidiyor document.execCommand('copy') API.

Tarayıcı Desteği

JavaScript document.execCommand('copy') Destek büyümüş, tarayıcı güncellemeleri için aşağıdaki linklere bakınız:

Basit bir örnek

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.focus();
  copyTextarea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
<p>
  <button class="js-textareacopybtn" style="vertical-align:top;">Copy Textarea</button>
  <textarea class="js-copytextarea">Hello I'm some text</textarea>
</p>

Karmaşık Örnek: Giriş gösterilmeden panoya kopyala

Yukarıdaki basit örnek, eğer bir textarea veya input öğe ekranda görünür.

Bazı durumlarda, metin görüntülenmeden metni panoya kopyalamak isteyebilirsiniz. input / textarea öğesi. Bu, bu etrafında çalışmanın bir örneğidir (temel olarak eleman ekle, panoya kopyala, öğeyi kaldır):

Google Chrome 44, Firefox 42.0a1 ve IE 11.0.8600.17814 ile test edildi.

function copyTextToClipboard(text) {
  var textArea = document.createElement("textarea");

  //
  // *** This styling is an extra step which is likely not required. ***
  //
  // Why is it here? To ensure:
  // 1. the element is able to have focus and selection.
  // 2. if element was to flash render it has minimal visual impact.
  // 3. less flakyness with selection and copying which **might** occur if
  //    the textarea element is not visible.
  //
  // The likelihood is the element won't even render, not even a flash,
  // so some of these are just precautions. However in IE the element
  // is visible whilst the popup box asking the user for permission for
  // the web page to copy to the clipboard.
  //

  // Place in top-left corner of screen regardless of scroll position.
  textArea.style.position = 'fixed';
  textArea.style.top = 0;
  textArea.style.left = 0;

  // Ensure it has a small width and height. Setting to 1px / 1em
  // doesn't work as this gives a negative w/h on some browsers.
  textArea.style.width = '2em';
  textArea.style.height = '2em';

  // We don't need padding, reducing the size if it does flash render.
  textArea.style.padding = 0;

  // Clean up any borders.
  textArea.style.border = 'none';
  textArea.style.outline = 'none';
  textArea.style.boxShadow = 'none';

  // Avoid flash of white box if rendered for any reason.
  textArea.style.background = 'transparent';


  textArea.value = text;

  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();

  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }

  document.body.removeChild(textArea);
}


var copyBobBtn = document.querySelector('.js-copy-bob-btn'),
  copyJaneBtn = document.querySelector('.js-copy-jane-btn');

copyBobBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Bob');
});


copyJaneBtn.addEventListener('click', function(event) {
  copyTextToClipboard('Jane');
});
<div style="display:inline-block; vertical-align:top;">
  <button class="js-copy-bob-btn">Set clipboard to BOB</button><br /><br />
  <button class="js-copy-jane-btn">Set clipboard to JANE</button>
</div>
<div style="display:inline-block;">
  <textarea class="js-test-textarea" cols="35" rows="4">Try pasting into here to see what you have on your clipboard:
  
  </textarea>
</div>

Ek Notlar

Sadece kullanıcı bir işlem yaparsa çalışır

Herşey document.execCommand('copy') aramalar, bir kullanıcı eyleminin doğrudan bir sonucu olarak gerçekleştirilmelidir, ör. tıklama olay işleyicisi. Bu, kullanıcıların beklemediklerinde panoya takılmayı önlemek için bir önlemdir.

Bakın Google Developers burada yayınlansın daha fazla bilgi için.

Pano API'sı

Tam Pano API taslak belirtiminin tamamını burada bulabilirsiniz: https://w3c.github.io/clipboard-apis/

Destekleniyor mu?

  • document.queryCommandSupported('copy') geri dönmeli true komut "tarayıcı tarafından destekleniyorsa".
  • ve document.queryCommandEnabled('copy') dönüş true Eğer document.execCommand('copy') şimdi çağrılırsa başarılı olur. Komutun kullanıcı tarafından başlatılan bir iş parçacığından çağrıldığından emin olmak için kontrol ediliyor ve diğer gereksinimler karşılanıyor.

Ancak, tarayıcı uyumluluk sorunlarının bir örneği olarak, yalnızca ~ Nisan'dan ~ Ekim 2015'e kadar Google Chrome döndü true itibaren document.queryCommandSupported('copy') komut, kullanıcı tarafından başlatılan bir iş parçacığı denir.

Aşağıdaki uyumluluk detayına dikkat edin.

Tarayıcı Uyumluluğu Ayrıntısı

Basit bir çağrı sırasında document.execCommand('copy') sarılmış try/catch Bir kullanıcı tıklaması sonucu olarak adlandırılan blok, size en uygun olanı kullanacaktır.

Herhangi bir çağrı document.execCommand, document.queryCommandSupported veya document.queryCommandEnabled sarılmış bir try/catch blok.

Farklı tarayıcı uygulamaları ve tarayıcı sürümleri, döndürme yerine çağrıldığında farklı istisna türleri atar false.

Farklı tarayıcı uygulamaları hala akışta ve Pano API'sı hala taslakta, test etmeyi unutma.


1593
2018-06-12 18:56



doğrudan değişken bir veriden nasıl kopyalanır. var str = "word"; ? - jscripter
@BubuDaba Gizli bir kukla oluştur <textarea> JS ile ekleyin document.body, değerini değişkene ayarlayın ve hızda kullanın copyTextareasonra içerik kopyalandıktan hemen sonra kaldırın. - SeinopSys
Safari'de veya Safari'de uygulanacak herhangi bir göstergede bir şey var mı? - www139
@AyaSalama anahtar nokta, "kopyalama" eyleminin, kullanıcının eylemi gerçekleştirdiği tarayıcıya görünmedikçe gerçekleşemeyeceğidir. Kullanıcı, "ekran: hiçbiri" ile göründüğü ve görüntüleyemediği veya etkileşimde bulunmayacağı için kullanıcı eylemi gerçekleştiremez. - Dean Taylor
Bu, herkes için iPhone Safari'de çalışır mı? - SB2055


Panoya otomatik kopyalama tehlikeli olabilir, bu nedenle çoğu tarayıcı (IE hariç) bunu çok zorlaştırır. Şahsen aşağıdaki basit numarayı kullanıyorum:

function copyToClipboard(text) {
  window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
}

Kullanıcı, kopyalanacak metnin zaten seçili olduğu komut kutusuyla birlikte sunulur. Şimdi basmak için yeterli Ctrl+C ve Girmek (kutuyu kapatmak için) - ve voila!

Şimdi panoya kopyalama işlemi GÜVENLİ, çünkü kullanıcı bunu manuel olarak yapıyor (ancak oldukça basit bir şekilde). Tabii ki tüm tarayıcılarda çalışır.

<button id="demo" onclick="copyToClipboard(document.getElementById('demo').innerHTML)">This is what I want to copy</button>

<script>
  function copyToClipboard(text) {
    window.prompt("Copy to clipboard: Ctrl+C, Enter", text);
  }
</script>


1195
2018-05-19 08:06



Güzel numara - ama Mac için Cmd-C olduğunu unutmayın - Casebash
Zeki, ama bu sadece tek satırı destekliyor. - Aram Kocharyan
"Komut istemi" işlevini özel bir modele çevirmek önemsizdir, hile eti düzenlenebilir bir içerik alanı kullanmak ve metni önceden seçmek, ve kullanıcının tarayıcıyı uyararak tarayıcının kullanıcı arayüzünü kırmamasıdır. kendilerini harekete geçir. A ++ - Jon z
hala panoya kopyalamak için javascript kullanmıyor ^ _ ^ - RozzA
Bu soruya cevap vermezken 457 tane oyu alması gariptir: panoya kopyala Javascript'te! - stevenvh


Aşağıdaki yaklaşım, Chrome, Firefox, Internet Explorer ve Edge'de ve Safari'nin son sürümlerinde çalışır (Kopyalama desteği, Ekim 2016'da yayınlanan 10 sürümüne eklenmiştir).

  • Bir textarea oluşturun ve içeriğini panoya kopyalanmasını istediğiniz metne yerleştirin.
  • Textarea'yı DOM'a ekleyin.
  • Textarea içindeki metni seçin.
  • Document.execCommand ("copy") numaralı telefonu arayın
  • Textarea'yı domdan çıkarın.

Not: aynı senkron Javascript koduyla eklendiğinde ve çıkarıldığında textarea'yı görmeyeceksiniz.

Bunu kendiniz uygularsanız dikkat etmeniz gereken bazı şeyler:

  • Güvenlik nedeniyle, bu yalnızca tıklama gibi bir olay işleyicisinden çağrılabilir (Açma pencerelerinde olduğu gibi).
  • IE panoya ilk kez bir izin iletişim kutusu gösterecektir.
  • Textarea odaklandığında IE ve Edge kayar.
  • execCommand () bazı durumlarda atabilir.
  • Bir textarea kullanmadan yeni satırlar ve sekmeler yutulabilir. (Çoğu makale bir div kullanmasını tavsiye ediyor)
  • IE iletişim kutusu görüntülenirken textarea görünür olacak, ya onu gizlemek ya da IE özel clipboardData API kullanın.
  • IE sistem yöneticileri pano API'sini devre dışı bırakabilir.

Aşağıdaki işlev, aşağıdaki tüm sorunları olabildiğince temiz bir şekilde ele almalıdır. Herhangi bir sorun bulursanız veya iyileştirmek için herhangi bir öneriniz varsa lütfen yorum bırakın.

// Copies a string to the clipboard. Must be called from within an 
// event handler such as click. May return false if it failed, but
// this is not always possible. Browser support for Chrome 43+, 
// Firefox 42+, Safari 10+, Edge and IE 10+.
// IE: The clipboard feature may be disabled by an administrator. By
// default a prompt is shown the first time the clipboard is 
// used (per session).
function copyToClipboard(text) {
    if (window.clipboardData && window.clipboardData.setData) {
        // IE specific code path to prevent textarea being shown while dialog is visible.
        return clipboardData.setData("Text", text); 

    } else if (document.queryCommandSupported && document.queryCommandSupported("copy")) {
        var textarea = document.createElement("textarea");
        textarea.textContent = text;
        textarea.style.position = "fixed";  // Prevent scrolling to bottom of page in MS Edge.
        document.body.appendChild(textarea);
        textarea.select();
        try {
            return document.execCommand("copy");  // Security exception may be thrown by some browsers.
        } catch (ex) {
            console.warn("Copy to clipboard failed.", ex);
            return false;
        } finally {
            document.body.removeChild(textarea);
        }
    }
}

https://jsfiddle.net/fx6a6n6x/


196
2017-11-26 00:03



Güzel cevap: çapraz tarayıcı desteği, hata işleme + temizle. Bugünün sorguComfigSupported için yeni destek olarak, panoya kopyalama artık Javascript içinde mümkün ve bu garip 'window.prompt ("Panoya kopyala: Ctrl + C, Enter", metin)' geçici çözüm yerine, kabul edilen cevap olmalıdır. window.clipboardData IE9'da destekleniyor, bu yüzden tarayıcı desteği listesinde IE9'u eklemelisiniz ve belki de IE8 ve önceki sürümleri de kullanmalıyım, ancak bunu doğrulamam gerekiyor. - user627283
Evet. IE 8/9 Tamam olmalı. Bizim app onları desteklemiyor. Bu yüzden test etmedim. IE Jan'de desteği durdurdu, ben de fazla uğraşmadım. Umarım Safari desteği yakında karaya inecek. Eminim radarlarında. - Greg Lowe
@SantiagoCorredoira: 2016'da bu kabul edilen cevap olmayı hak ediyor. Lütfen BGT'yi yeniden işaretlemeyi düşünün (büyük yeşil onay). - Lawrence Dol
@Noitidart Test ettim ve firefox 54, krom 60 ve kenar tarayıcı için mükemmel çalışıyor, odak html belgesinde olmasa bile, sahip olduğunuz hata muhtemelen FF 55 versiyonuna özgüdür - Tosin John
@Noitidart Burada hala mükemmel çalışıyor, dev araçlara odaklanmak onu durdurmadı. Ve bu arada, normal bir web uygulaması kullanıcısı geliştirici araçlarında ne yapacak? - Tosin John


Eğer gerçekten basit bir çözüm istiyorsanız (entegrasyon için 5 dakikadan az sürüyorsa) ve kutudan iyi görünüyorsa Clippy, daha karmaşık çözümlerin bazılarına güzel bir alternatiftir.

Clippy

Github'un kurucularından biri tarafından yazılmıştır. Örnek Flash aşağıdaki kodu gömün:

<object 
   classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
   width="110"
   height="14"
   id="clippy">
  <param name="movie" value="/flash/clippy.swf"/>
  <param name="allowScriptAccess" value="always"/>
  <param name="quality" value="high"/>
  <param name="scale" value="noscale"/>
  <param NAME="FlashVars" value="text=#{text}"/>
  <param name="bgcolor" value="#{bgcolor}"/>
  <embed 
     src="/flash/clippy.swf"
     width="110"
     height="14"
     name="clippy"
     quality="high"
     allowScriptAccess="always"
     type="application/x-shockwave-flash"
     pluginspage="http://www.macromedia.com/go/getflashplayer"
     FlashVars="text=#{text}"
     bgcolor="#{bgcolor}"/>
</object>

Değiştirmeyi unutma #{text} kopyalamanız gereken metinle ve #{bgcolor} bir renkle.


93
2017-10-17 14:40



İlgilenen herkes için, Repo'nun URL'sini kopyalarken Clippy'nin GitHub'da kullanıldığını kontrol edin. - Radek
FYI, GitHub üzerinde Clippy kullanımı ZeroClipboard ile değiştirildi. - James M. Greene
OP, JavaScript'te bir çözüm istedi. Flaş değil. - MT.
@MT, "javascript" tarafından bazı kullanıcılar "tarayıcı istemcisindeki" anlamına gelir, bu yüzden JS sadece bir gereksinim olsa da, bu yanıtı kullanan birçok kişi gerçekten JS-or-diğer-yaygın olarak desteklenen- istemci teknoloji. Flash, tüm platformlara vurmaz, ancak pano desteği gibi lehçe bir özellik için, bir popup iletişim kutusu üzerinde UX'i geliştirirse, buna eklemeye değerdir (bu kesinlikle yapar). - Dave Dopson
Şimdiye kadar Flash'a dayanarak, neredeyse herkesin web geliştirme yaptığı için kabul edilemez olan site ziyaretçilerinin yüzdesi için çalışmayan şeylere sahip olmak anlamına geliyor. - jinglesthula


Panoyu bir web sayfasından okumak ve değiştirmek, güvenlik ve gizlilikle ilgili endişeleri artırır. Ancak, Internet Explorer'da bunu yapmak mümkündür. Bunu buldum örnek snippet:

    <script type="text/javascript">
        function select_all(obj) {
            var text_val=eval(obj);
            text_val.focus();
            text_val.select();
            r = text_val.createTextRange();
            if (!r.execCommand) return; // feature detection
            r.execCommand('copy');
        }
    </script>
    <input value="http://www.sajithmr.com"
     onclick="select_all(this)" name="url" type="text" />


78
2017-12-30 13:33



Basit bir kopyalama işlemi için flaş kullanmak overkill gibi görünüyor, bunu yapmak için temiz bir JS yolu olduğundan memnunum. Ve kurumsal bir kuruluştayız. IE sadece iyidir. Teşekkürler Bandi! - Eddie
plz ne olduğunu açıkla execCommand(\\’copy\\’); IE için panoya kopyalanmazsa yapar mı? @mrBorna - RozzA
IE7-IE9'da iyi çalışıyor, teşekkürler! - luschn
Kullanmayın if(!document.all) fakat if(!r.execCommand) başkası bunu uygularsa! Document.all kesinlikle bunun için uygun değildir. - m93a
Adamım, bu basit ve temiz kod hakkında sevdiğim şey, neredeyse hiç bakım gerektirmeden neredeyse sonsuza kadar çalışıyor. Bu benim için yaptı, güzel çalışıyor. - Samuel Ramzan


Yakın zamanda yazdım teknik blog yazısı Bu çok sorun üzerinde (Lucidchart'ta çalışıyorum ve kısa süre önce panomuzda bir revizyon yaptım).

Bir sistem kopyalama olayı sırasında bunu yapmak istediğiniz varsayılarak (düz metinleri panoya kopyalama nispeten basittir) (kullanıcı presleri) CtrlC veya tarayıcının menüsünü kullanır).

var isIe = (navigator.userAgent.toLowerCase().indexOf("msie") != -1 
           || navigator.userAgent.toLowerCase().indexOf("trident") != -1);

document.addEventListener('copy', function(e) {
    var textToPutOnClipboard = "This is some text";
    if (isIe) {
        window.clipboardData.setData('Text', textToPutOnClipboard);    
    } else {
        e.clipboardData.setData('text/plain', textToPutOnClipboard);
    }
    e.preventDefault();
});

Bir sistem kopyası olayı sırasında değil, panoya metin koymak çok daha zordur. Bu diğer cevapların bazılarını Flash aracılığıyla yapmanın referans yollarına benziyor. Bu, bunu yapabilmem için tek çapraz tarayıcı yolu (anladığım kadarıyla).

Bunun dışında, tarayıcıya göre tarayıcı bazında bazı seçenekler vardır.

Bu, clipboardData nesnesine JavaScript aracılığıyla herhangi bir zamanda erişebileceğiniz IE'deki en basit adımdır:

window.clipboardData

(Bunu bir sistem kesmesi, kopyalama veya yapıştırma olayının dışında yapmayı denediğinizde, IE, kullanıcıyı web uygulama panosu iznini vermesini ister.)

Chrome'da size verecek bir Chrome uzantısı oluşturabilirsiniz. pano izinleri (bu Lucidchart için yaptığımız şey). Daha sonra, eklentiniz yüklü olan kullanıcılar için sistem olayını kendiniz yapmanız gerekecek:

document.execCommand('copy');

Firefox'un varmış gibi görünüyor bazı seçenekler kullanıcıların panoya erişmek için belirli sitelere izin vermesine izin verir, ancak bunlardan hiçbirini kişisel olarak denemedim.


65
2017-12-03 20:31



Blog yazısında (yakın gelecekte güncellemeyi umuyoruz) belirtilmeyen, execCommand kullanarak kesmeyi ve kopyalamayı başlatabilme yeteneğidir. Bu IE10 +, Chrome 43+ ve Opera29 + 'da desteklenir. Burada okuyun. updates.html5rocks.com/2015/04/cut-and-copy-commands - Richard Shurtz
Bununla ilgili bir problem, diğer normal kopya olaylarını kaçırmasıdır. - Brock Adams


clipboard.js metin veya html verilerinin panoya kopyalanmasını sağlayan küçük, flaşsız bir yardımcı programdır. Kullanımı çok kolaydır, sadece .js'yi ekleyin ve böyle 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 açık GitHub


44
2017-08-11 15:33



Bu kütüphane, Tour of Hero için angular.io tarafından kullanılır ve kullanıcının kopyalaması için önceden seçilmiş bir metni görüntüleyerek, execCommand'ı desteklemeyen tarayıcı için zarif modda geri dönüş sağlar. - John-Philip


ZeroClipboard bulduğum en iyi çapraz tarayıcı çözümüdür:

<div id="copy" data-clipboard-text="Copy Me!">Click to copy</div>    
<script src="ZeroClipboard.js"></script>
<script>
  var clip = new ZeroClipboard( document.getElementById('copy') );
</script>

İOS için flash olmayan desteğe ihtiyacınız varsa, sadece bir geri dönüş ekleyin:

clip.on( 'noflash', function ( client, args ) {
    $("#copy").click(function(){            
        var txt = $(this).attr('data-clipboard-text');
        prompt ("Copy link, then click OK.", txt);
    });
});  

http://zeroclipboard.org/

https://github.com/zeroclipboard/ZeroClipboard


35
2017-11-21 20:41



Flash ile çapraz tarayıcı? iOS ve Android 4.4’de çalışmıyor - Raptor
Güncellenmiş cevaba bakınız. Bu, flash kullanıcıları için daha az adım ve herkes için bir geri çekilme sağlar. - Justin
milyarlarca kod satırı var. kesinlikle gülünç. Böyle bir canavarı bir projeye dahil etmekten daha iyisini yapmamak - vsync
Basit bir sürümü var gist.github.com/JamesMGreene/8698897 Bu 74K sürümünde tüm çanlar ve ıslıkların olmadığı 20K. Ne de çok büyük. Tahminimce çoğu kullanıcı, bir 74k veya bir 20k dosyasının indirileceği ek milisaniye ile tamamdır, böylece kopyala / yapıştır iki yerine bir tıklamadır. - Justin
@Justin Örnekleri kopyalayıp yapıştırsam bile, yerel olarak çalışamıyorum. (En az değişiklik yapıyorum, ör. src komut dosyasında). Belgelerinin güzel ama verimsiz olduğunu hissediyorum. - Gui Imamura


İşte bunu aldım ..

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input)
    return result;
 }

30
2017-09-14 09:20



İlk denemede çalıştı. Şerefe. - JustAGuy
Yardım ettiğime sevindim. - nikksan
Çekicilik gibi çalışır, yardım için teşekkürler. +1 - FONGOH MARTIN
@nikksan ile dize nasıl kopyalanır \n? - sof-03
Win10x64 üzerinde Microsoft Edge 42.17134.1.0'da çalışmıyor - Honsa Stunna