คัดลอก / ใส่ข้อความบนคลิปบอร์ดด้วย FireFox, Safari และ Chrome

ใน Internet Explorer ฉันสามารถใช้วัตถุ clipboardData เพื่อเข้าถึงคลิปบอร์ดได้ ฉันจะทำเช่นนั้นใน FireFox, Safari และ / หรือ Chrome ได้อย่างไร

ตอนนี้มีวิธีง่ายๆในการทำเช่นนี้ในเบราว์เซอร์ที่ทันสมัยที่สุดโดยใช้

document.execCommand('copy');

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

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

หากต้องการคัดลอกข้อความแบบสุดลูกหูลูกตาคุณสามารถสร้าง textArea ได้อย่างรวดเร็วแก้ไขข้อความในกล่องเลือกคัดลอกแล้วลบ textArea ในกรณีส่วนใหญ่ข้อความนี้พื้นที่จะไม่กะพริบบนหน้าจอด้วยซ้ำ

ด้วยเหตุผลด้านความปลอดภัยเบราว์เซอร์จะอนุญาตให้คุณคัดลอกก็ต่อเมื่อผู้ใช้ดำเนินการบางอย่าง (เช่นคลิกปุ่ม) วิธีหนึ่งในการดำเนินการนี้คือเพิ่มเหตุการณ์ onClick ลงในปุ่ม html ที่เรียกใช้เมธอดที่คัดลอกข้อความ

ตัวอย่างเต็ม:

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

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

ด้วยเหตุผลด้านความปลอดภัย Firefox ไม่อนุญาตให้คุณวางข้อความบนคลิปบอร์ด อย่างไรก็ตามมีวิธีแก้ปัญหาโดยใช้ Flash

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

ข้อเสียเพียงอย่างเดียวคือต้องเปิดใช้งาน Flash

แหล่งที่มาเสียแล้ว: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( และมันก็คือแคชของGoogle )

สเปรดชีตออนไลน์ขอ Ctrl + C, Ctrl + V เหตุการณ์และถ่ายโอนโฟกัสไปยังตัวควบคุม TextArea ที่ซ่อนอยู่และตั้งค่าเนื้อหาเป็นเนื้อหาคลิปบอร์ดใหม่ที่ต้องการสำหรับการคัดลอกหรืออ่านเนื้อหาหลังจากเหตุการณ์เสร็จสิ้นเพื่อวาง

ดูเพิ่มเติมเป็นไปได้ไหมที่จะอ่านคลิปบอร์ดใน Firefox, Safari และ Chrome โดยใช้ Javascript

มันเป็นฤดูร้อนปี 2015 และด้วยความวุ่นวายมากมายรอบ ๆ Flash ฉันคิดว่าฉันจะเพิ่มคำตอบใหม่สำหรับคำถามนี้เพื่อหลีกเลี่ยงการใช้งานโดยสิ้นเชิง

clipboard.jsเป็นยูทิลิตี้ที่ดีที่อนุญาตให้คัดลอกข้อความหรือข้อมูล html ไปยังคลิปบอร์ด ใช้งานง่ายมากเพียงแค่ใส่. js และใช้สิ่งนี้:

<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 อยู่ในGitHub ด้วย

ในปี 2560 คุณทำได้ (พูดแบบนี้เพราะกระทู้นี้เกือบ 9 ปีแล้ว!)

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

และตอนนี้เพื่อคัดลอก copyStringToClipboard('Hello World')

หากคุณสังเกตเห็นsetDataเส้นและสงสัยว่าคุณสามารถตั้งค่าประเภทข้อมูลต่างๆได้หรือไม่คำตอบคือใช่

Firefox อนุญาตให้คุณจัดเก็บข้อมูลในคลิปบอร์ด แต่เนื่องจากผลกระทบด้านความปลอดภัยจึงถูกปิดใช้งานโดยค่าเริ่มต้น ดูวิธีการเปิดใช้งานใน "การให้สิทธิ์การเข้าถึง JavaScript ไปยังคลิปบอร์ด"ในฐานความรู้ Mozilla Firefox

โซลูชันที่ amdfan นำเสนอนั้นดีที่สุดหากคุณมีผู้ใช้จำนวนมากและการกำหนดค่าเบราว์เซอร์ไม่ใช่ตัวเลือก แม้ว่าคุณจะทดสอบได้ว่ามีคลิปบอร์ดและให้ลิงค์สำหรับเปลี่ยนการตั้งค่าหากผู้ใช้มีความเชี่ยวชาญด้านเทคโนโลยี โปรแกรมแก้ไข JavaScript TinyMCE เป็นไปตามแนวทางนี้

ฟังก์ชัน copyIntoClipboard () ใช้งานได้กับ Flash 9 แต่ดูเหมือนว่าจะใช้งานไม่ได้จากการเปิดตัว Flash player 10 ต่อไปนี้เป็นโซลูชันที่ใช้งานได้กับ Flash Player ใหม่:

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

เป็นวิธีแก้ปัญหาที่ซับซ้อน แต่ได้ผล

ฉันต้องบอกว่าไม่มีวิธีแก้ปัญหาเหล่านี้จริงๆผลฉันได้ลองใช้วิธีแก้ปัญหาคลิปบอร์ดจากคำตอบที่ยอมรับแล้วและมันใช้ไม่ได้กับ Flash Player 10 ฉันได้ลองใช้ ZeroClipboard แล้วและฉันก็มีความสุขมากกับมันสักพัก

ฉันกำลังใช้มันบนเว็บไซต์ของฉันเอง ( http://www.blogtrog.com ) แต่ฉันสังเกตเห็นข้อบกพร่องแปลก ๆ กับมัน วิธีการทำงานของ ZeroClipboard คือวางวัตถุแฟลชที่มองไม่เห็นไว้ด้านบนขององค์ประกอบบนหน้าเว็บของคุณ ฉันพบว่าถ้าองค์ประกอบของฉันเคลื่อนไหว (เช่นเมื่อผู้ใช้ปรับขนาดหน้าต่างและฉันจัดตำแหน่งให้ถูกต้อง) วัตถุแฟลช ZeroClipboard จะหลุดออกจากการตีและไม่ครอบคลุมวัตถุอีกต่อไป ฉันสงสัยว่ามันอาจจะยังคงนั่งอยู่ที่เดิม พวกเขามีโค้ดที่ควรจะหยุดมันหรือรีสตาร์ทเข้ากับองค์ประกอบ แต่ดูเหมือนจะไม่ได้ผล

ดังนั้น ... ใน BlogTrog รุ่นถัดไปฉันเดาว่าฉันจะทำตามด้วยตัวเน้นรหัสอื่น ๆ ทั้งหมดที่ฉันเคยเห็นในป่าและลบปุ่ม Copy to Clipboard ของฉัน :-(

(ฉันสังเกตเห็นว่าตอนนี้ Copy to Clipboard ของ dp.syntaxhiglighter เสียด้วย)

คำถามเก่าเกินไป แต่ฉันไม่เห็นคำตอบนี้ทุกที่ ...

ตรวจสอบลิงค์นี้:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

เหมือนที่ทุกคนพูดเพราะเหตุผลด้านความปลอดภัยถูกปิดใช้งานโดยค่าเริ่มต้น ลิงค์ด้านบนแสดงคำแนะนำวิธีการเปิดใช้งาน (โดยแก้ไข about: config ใน firefox หรือ user.js)

โชคดีที่มีปลั๊กอินชื่อ "AllowClipboardHelper" ซึ่งทำให้สิ่งต่างๆง่ายขึ้นด้วยการคลิกเพียงไม่กี่ครั้ง อย่างไรก็ตามคุณยังต้องแนะนำผู้เยี่ยมชมเว็บไซต์ของคุณเกี่ยวกับวิธีเปิดใช้งานการเข้าถึงใน firefox

ใช้ document.execCommand ที่ทันสมัย ​​("สำเนา") และ jQuery ดูคำตอบ stackoverflow นี้

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

วิธีโทร:

 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>

ฉันใช้Clippyของ Github สำหรับความต้องการของฉันปุ่มที่ใช้ Flash แบบธรรมดา ใช้งานได้ดีหากไม่ต้องการการจัดแต่งทรงผมและพอใจกับการใส่สิ่งที่จะวางลงบนฝั่งเซิร์ฟเวอร์ล่วงหน้า

การปรับปรุงโซลูชัน Flash เล็กน้อยคือการตรวจจับแฟลช 10 โดยใช้ swfobject:

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

แล้วถ้ามันแสดงเป็นแฟลช 10 ให้ลองโหลดวัตถุ Shockwave โดยใช้จาวาสคริปต์ Shockwave สามารถอ่าน / เขียนไปยังคลิปบอร์ด (ในทุกเวอร์ชัน) เช่นกันโดยใช้คำสั่ง copyToClipboard () ในศัพท์แสง

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.aspทำงานร่วมกับ Flash 10 และเบราว์เซอร์ที่เปิดใช้งาน Flash ทั้งหมด

นอกจากนี้ ZeroClipboard ได้รับการอัปเดตเพื่อหลีกเลี่ยงข้อบกพร่องที่กล่าวถึงเกี่ยวกับการเลื่อนหน้าทำให้ภาพยนตร์ Flash ไม่อยู่ในตำแหน่งที่ถูกต้องอีกต่อไป

เนื่องจากวิธีการนั้น "ต้องการ" ให้ผู้ใช้คลิกปุ่มเพื่อคัดลอกจึงเป็นความสะดวกสำหรับผู้ใช้และไม่มีอะไรที่เลวร้ายเกิดขึ้น

ลองสร้างตัวแปรส่วนกลางของหน่วยความจำที่จัดเก็บการเลือกจากนั้นฟังก์ชันอื่น ๆ สามารถเข้าถึงตัวแปรและทำการวางเช่น ..

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

}

หากคุณรองรับแฟลชคุณสามารถใช้https://everyplay.com/assets/clipboard.swfและใช้ข้อความ flashvars เพื่อตั้งค่าข้อความ

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

นั่นคือสิ่งที่ฉันใช้ในการคัดลอกและคุณสามารถตั้งค่าเป็นพิเศษได้หากไม่รองรับตัวเลือกเหล่านี้คุณสามารถใช้ได้:

สำหรับ Internet Explorer: window.clipboardData.setData (DataFormat, Text) และ window.clipboardData.getData (DataFormat)

คุณสามารถใช้ข้อความและ URL ของ DataFormat เพื่อ getData และ setData

และในการลบข้อมูล:

คุณสามารถใช้ไฟล์, HTML, รูปภาพ, ข้อความและ URL ของ DataFormat ได้ PS: คุณต้องใช้ window.clipboardData.clearData (DataFormat);

และสำหรับอื่น ๆ ที่ไม่รองรับไฟล์ window.clipboardData และ swf flash คุณยังสามารถใช้ปุ่ม control + c บนแป้นพิมพ์ของคุณสำหรับ windows และสำหรับ mac command + c

จากรหัส addon:

ในกรณีที่ใครก็ตามกำลังมองหาวิธีการทำจากโครเมี่ยมโค้ดคุณสามารถใช้อินเทอร์เฟซ nsIClipboardHelper ตามที่อธิบายไว้ที่นี่: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

ใช้document.execCommand('copy'). การสนับสนุนในรุ่นล่าสุดของChrome, Firefox, และEdgeSafari

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>

คลิปบอร์ด APIdocument.execCommandถูกออกแบบมาเพื่อใช้แทน Safari ยังคงดำเนินการสนับสนุนดังนั้นคุณควรระบุทางเลือกจนกว่าข้อมูลจำเพาะจะถูกกำหนดและ Safari จะเสร็จสิ้นการใช้งาน

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>

ด้วยเหตุผลด้านความปลอดภัยคลิปบอร์ดPermissionsอาจจำเป็นต้องอ่านและเขียนจากคลิปบอร์ด หากข้อมูลโค้ดใช้ไม่ได้บน SO โปรดลองใช้ข้อมูลโค้ดlocalhostหรือโดเมนที่เชื่อถือได้

สร้างคำตอบที่ยอดเยี่ยมจาก @David จาก Studio 201 ซึ่งใช้งานได้ใน Safari, FF และ Chrome นอกจากนี้ยังช่วยให้มั่นใจได้ว่าจะไม่เกิดการกะพริบจากการtextareaวางไว้นอกหน้าจอ

// ================================================================================
// 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
    };
})();