Flash olmadan panoya kopyala

Panoya kopyalamak için birçok çözüm buldum, ancak hepsi ya flash ile ya da web siteleri için. Otomatik olarak panoya, flash olmadan ve kullanıcı tarafı için yöntem kopyasını arıyorum, bu kullanıcı komutları ve tabii ki çapraz tarayıcı için.

Flash olmadan çoğu tarayıcıda mümkün değildir. Kullanıcının panosu, parolalar veya kredi kartı numaraları gibi şeyler içerebileceğinden güvenlikle ilgili bir kaynaktır. Bu nedenle, tarayıcılar haklı olarak Javascript erişimine izin vermez (bazıları, kullanıcının onayladığını gösteren bir uyarı ile veya imzalı Javascript kodu ile izin verir, ancak bunların hiçbiri çapraz tarayıcı değildir).

Flash çözümünü denedim ve ben de beğenmedim. Çok karmaşık ve çok yavaş. Yaptığım şey bir metin alanı oluşturmak, verileri oraya koymak ve tarayıcının "CTRL + C" davranışını kullanmaktı.

JQuery javascript bölümü:

// catch the "ctrl" combination keydown
$.ctrl = function(key, callback, args) {
    $(document).keydown(function(e) {
        if(!args) args=[]; // IE barks when args is null
        if(e.keyCode == key && e.ctrlKey) {
            callback.apply(this, args);
            return false;
        }
    });
};

// put your data on the textarea and select all
var performCopy = function() {
    var textArea = $("#textArea1");
    textArea.text('PUT THE TEXT TO COPY HERE. CAN BE A FUNCTION.');
    textArea[0].focus();
    textArea[0].select();
};

// bind CTRL + C
$.ctrl('C'.charCodeAt(0), performCopy);

HTML bölümü:
<textarea id="textArea1"></textarea>

Şimdi, kopyalamak istediğiniz şeyi yazın 'METİNİ KOPYALAMAK İÇİN BURAYA KOYUN. BİR İŞLEV OLABİLİR. ' alan. Benim için iyi çalışıyor. Sadece bir CTRL + C kombinasyonu yapmalısınız. Tek dezavantajı, sitenizde çirkin bir metin alanına sahip olmanızdır. Style = "display: none" kullanırsanız, kopyalama çözümü çalışmayacaktır.

clipboard.js , Flash'a ihtiyaç duymadan panoya kopyalamak için piyasaya çıktı

Burada iş başında görün> http://zenorocha.github.io/clipboard.js/#example-action

O sonunda burada! (Safari veya IE8 ... -_- desteklemediğiniz sürece)

Artık gerçekten Flash olmadan pano eylemlerini işleyebilirsiniz. İşte ilgili belgeler:

https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

https://developers.google.com/web/updates/2015/04/cut-and-copy-commands?hl=en

https://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx#copy

^{İken sabırsızlıkla bekleyen bir Xbrowser desteği için Pano API ...}

IE , kullanıcıdan Pano'ya yalnızca bir kez erişmesini ister.
Safari (yazma sırasında 5.1) şunları desteklemez execCommand:copy/cut

/**
 * CLIPBOARD
 * https://stackoverflow.com/a/33337109/383904
 */
const clip = e => {
  e.preventDefault();
  
  const cont = e.target.innerHTML;
  const area = document.createElement("textarea");
  
  area.value = e.target.innerHTML; // or use .textContent
  document.body.appendChild(area);
  area.select();
 
  if(document.execCommand('copy')) console.log("Copied to clipboard");
  else prompt("Copy to clipboard:\nSelect, Cmd+C, Enter", cont); // Saf, Other
  
  area.remove();
};


[...document.querySelectorAll(".clip")].forEach(el => 
  el.addEventListener("click", clip)
);

<a class="clip" href="#!">Click an item to copy</a><br>
<a class="clip" href="#!"><i>Lorem</i></a><br>
<a class="clip" href="#!"><b>IPSUM</b></a><br>

<textarea placeholder="Paste here to test"></textarea>

(Sadece yazın mim üstesinden gelebiliyor Firefox dışındaki tüm tarayıcılar "plain/text"Ive'sınav kadarıyla) var uygulanmadı Pano API . Yani, Chrome'da pano olayını okumaya çalışıyorum

var clipboardEvent = new ClipboardEvent("copy", {
        dataType: "plain/text",
        data: "Text to be sent to clipboard"
});

atar: Yakalanmamış TypeError: Illegal yapıcı

Tarayıcılar ve Pano arasında meydana gelen inanılmaz karmaşanın en iyi kaynağı burada görülebilir (caniuse.com) (→ "Notlar" altındaki yorumları takip edin ).
MDN , yanlış olan tüm tarayıcılar için temel desteğin "(EVET)" olduğunu söylüyor, bu da en azından API'nin çalışmasının beklenmesine neden oluyor.

HTML sayfasına yerel bir pano kullanabilirsiniz. Bu, HTML sayfası İÇİNDEKİ içeriği kopyalamanıza / kesmenize / yapıştırmanıza izin verir, ancak üçüncü taraf uygulamalarından / uygulamalarından veya iki HTML sayfası arasında değil.

Bunu yapmak için özel bir işlevi şu şekilde yazabilirsiniz (Chrome ve Firefox'ta test edilmiştir):

İşte bunu nasıl yapabileceğinizi gösteren FIDDLE .

Ayrıca referans için kemanı buraya yapıştıracağım.

HTML

<p id="textToCopy">This is the text to be copied</p>
<input id="inputNode" type="text" placeholder="Copied text will be pasted here" /> <br/>

<a href="#" onclick="cb.copy()">copy</a>
<a href="#" onclick="cb.cut()">cut</a>
<a href="#" onclick="cb.paste()">paste</a>

JS

function Clipboard() {
    /* Here we're hardcoding the range of the copy
    and paste. Change to achieve desire behavior. You can
    get the range for a user selection using
    window.getSelection or document.selection on Opera*/
    this.oRange = document.createRange();
    var textNode = document.getElementById("textToCopy");
    var inputNode = document.getElementById("inputNode");
    this.oRange.setStart(textNode,0);
    this.oRange.setEndAfter(textNode);
    /* --------------------------------- */
}

Clipboard.prototype.copy = function() {
    this.oFragment= this.oRange.cloneContents();
};

Clipboard.prototype.cut = function() {
    this.oFragment = this.oRange.extractContents();
};

Clipboard.prototype.paste = function() {
    var cloneFragment=this.oFragment.cloneNode(true)
    inputNode.value = cloneFragment.textContent;
};

window.cb = new Clipboard();

document.execCommand('copy')ne istersen yapacak. Ancak bu iş parçacığında doğrudan kullanılabilecek hiçbir örnek yoktu, işte burada:

var textNode = document.querySelector('p').firstChild
var range = document.createRange()
var sel = window.getSelection()

range.setStart(textNode, 0)
range.setEndAfter(textNode)
sel.removeAllRanges()
sel.addRange(range)
document.execCommand('copy')

Bunun yolu yok, flaş kullanmak zorundasın. Bir flash (swf) dosyası kullanarak tarayıcılar arası kopyalama ve yapıştırma sağlayan jquery.copy adlı bir JQuery eklentisi var . Bu, blogumdaki sözdizimi işaretleyicinin nasıl çalıştığına benzer.

Jquery.copy.js dosyasına başvurduğunuzda, verileri panoya göndermek için yapmanız gereken tek şey aşağıdakileri çalıştırmaktır:

$.copy("some text to copy");

Güzel ve kolay ;)