คัดลอกไปยังคลิปบอร์ดโดยไม่ใช้แฟลช

ฉันพบวิธีแก้ปัญหามากมายสำหรับการคัดลอกไปยังคลิปบอร์ด แต่ทั้งหมดนี้ใช้แฟลชหรือสำหรับเว็บไซต์ ฉันกำลังมองหาวิธีคัดลอกไปยังคลิปบอร์ดโดยอัตโนมัติโดยไม่ต้องใช้แฟลชและสำหรับฝั่งผู้ใช้สำหรับ userscripts และแน่นอนว่าข้ามเบราว์เซอร์

หากไม่มีแฟลชก็ไม่สามารถทำได้ในเบราว์เซอร์ส่วนใหญ่ คลิปบอร์ดของผู้ใช้เป็นทรัพยากรที่เกี่ยวข้องกับความปลอดภัยเนื่องจากอาจมีสิ่งต่างๆเช่นรหัสผ่านหรือหมายเลขบัตรเครดิต ดังนั้นเบราว์เซอร์จึงไม่อนุญาตให้เข้าถึง Javascript ได้อย่างถูกต้อง (บางตัวอนุญาตพร้อมคำเตือนที่แสดงว่าผู้ใช้ยืนยันหรือมีรหัส Javascript ที่ลงนามแล้ว แต่ไม่มีสิ่งใดที่เป็นข้ามเบราว์เซอร์)

ฉันได้ลองใช้โซลูชันแฟลชแล้วและฉันก็ไม่ชอบเช่นกัน ซับซ้อนเกินไปและช้าเกินไป สิ่งที่ฉันทำคือสร้างพื้นที่ข้อความใส่ข้อมูลลงในนั้นและใช้พฤติกรรม "CTRL + C" ของเบราว์เซอร์

ส่วน jQuery javascript:

// 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:
<textarea id="textArea1"></textarea>

ตอนนี้ใส่สิ่งที่คุณต้องการคัดลอกใน 'วางข้อความเพื่อคัดลอกที่นี่ สามารถเป็นหน้าที่ได้ ' พื้นที่. ใช้งานได้ดีสำหรับฉัน คุณต้องสร้างชุดค่าผสม CTRL + C ชุดเดียว ข้อเสียเปรียบเพียงประการเดียวคือคุณจะมีพื้นที่ข้อความที่น่าเกลียดปรากฏในไซต์ของคุณ หากคุณใช้ style = "display: none" โซลูชันการคัดลอกจะไม่ทำงาน

clipboard.jsเพิ่งเปิดตัวเพื่อคัดลอกไปยังคลิปบอร์ดโดยไม่ต้องใช้ Flash

ดูการใช้งานจริงที่นี่> http://zenorocha.github.io/clipboard.js/#example-action

มาถึงแล้ว! (ตราบใดที่คุณไม่รองรับ Safari หรือ IE8 ... -_-)

ตอนนี้คุณสามารถจัดการการกระทำของคลิปบอร์ดโดยไม่ใช้ Flash นี่คือเอกสารที่เกี่ยวข้อง:

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

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

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

^{ในขณะที่รออย่างใจร้อนสำหรับการสนับสนุน Xbrowser ของClipboard API ...}

IEจะแจ้งให้ผู้ใช้เข้าถึงคลิปบอร์ดเพียงครั้งเดียว
ซาฟารี (5.1 ในขณะที่เขียน) ไม่รองรับ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>

เบราว์เซอร์ทั้งหมด (ยกเว้น Firefox ที่จะสามารถจัดการกับชนิดของไฟล์เพียง"plain/text"เท่าที่ผมได้ทดสอบ) ได้ไม่ได้ดำเนินการคลิปบอร์ด API เช่นพยายามอ่านเหตุการณ์คลิปบอร์ดใน Chrome โดยใช้

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

พ่น: Uncaught TypeError: ตัวสร้างที่ผิดกฎหมาย

แหล่งข้อมูลที่ดีที่สุดของความยุ่งเหยิงที่ไม่น่าเชื่อที่เกิดขึ้นในเบราว์เซอร์และคลิปบอร์ดสามารถดูได้ที่นี่ (caniuse.com) (→ติดตามความคิดเห็นใน"หมายเหตุ" )
MDN กล่าวว่าการสนับสนุนขั้นพื้นฐานคือ"(YES)"สำหรับเบราว์เซอร์ทั้งหมดที่ไม่ถูกต้องสาเหตุที่คาดว่าอย่างน้อย API จะทำงานได้ทั้งหมด

คุณสามารถใช้คลิปบอร์ดภายในกับเพจ HTML วิธีนี้ช่วยให้คุณสามารถคัดลอก / ตัด / วางเนื้อหาภายในหน้า HTML ได้ แต่ไม่สามารถส่งจาก / ไปยังแอปพลิเคชันของบุคคลที่สามหรือระหว่างหน้า HTML สองหน้า

นี่คือวิธีที่คุณสามารถเขียนฟังก์ชันที่กำหนดเองเพื่อทำสิ่งนี้ (ทดสอบใน chrome และ firefox):

นี่คือFIDDLEที่แสดงให้เห็นว่าคุณสามารถทำสิ่งนี้ได้อย่างไร

ฉันจะวางซอที่นี่เพื่อใช้อ้างอิง

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')จะทำในสิ่งที่คุณต้องการ แต่ไม่มีตัวอย่างที่ใช้งานได้โดยตรงในเธรดนี้โดยไม่มีไม้ค้ำยันดังนั้นนี่คือ:

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')

ไม่มีทางไปไหนคุณต้องใช้แฟลช มีปลั๊กอิน JQuery ที่เรียกว่าjquery.copyที่ให้การคัดลอกและวางแบบข้ามเบราว์เซอร์โดยใช้ไฟล์ flash (swf) สิ่งนี้คล้ายกับวิธีการทำงานของเครื่องมือเน้นไวยากรณ์ในบล็อกของฉัน

เมื่อคุณอ้างอิงไฟล์ jquery.copy.js สิ่งที่คุณต้องทำเพื่อพุชข้อมูลลงในคลิปบอร์ดให้รันสิ่งต่อไปนี้:

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

ดีและง่าย;)