Sao chép / Đặt văn bản vào khay nhớ tạm bằng FireFox, Safari và Chrome

Trong Internet Explorer, tôi có thể sử dụng đối tượng clipboardData để truy cập vào khay nhớ tạm. Làm cách nào để thực hiện điều đó trong FireFox, Safari và / hoặc Chrome?

Hiện có một cách để dễ dàng thực hiện việc này trong hầu hết các trình duyệt hiện đại bằng cách sử dụng

document.execCommand('copy');

Điều này sẽ sao chép văn bản hiện được chọn. Bạn có thể chọn một textArea hoặc trường nhập liệu bằng cách sử dụng

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

Để sao chép văn bản một cách vô hình, bạn có thể nhanh chóng tạo một textArea, sửa đổi văn bản trong hộp, chọn nó, sao chép nó, rồi xóa textArea. Trong hầu hết các trường hợp, văn bản này thậm chí không nhấp nháy trên màn hình.

Vì lý do bảo mật, các trình duyệt sẽ chỉ cho phép bạn sao chép nếu người dùng thực hiện một số loại hành động (tức là nhấp vào nút). Một cách để thực hiện việc này là thêm sự kiện onClick vào nút html gọi một phương thức sao chép văn bản.

Một ví dụ đầy đủ:

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

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

Vì lý do bảo mật, Firefox không cho phép bạn đặt văn bản vào khay nhớ tạm. Tuy nhiên, có một công việc khả dụng khi sử dụng 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;
}

Điểm bất lợi duy nhất là điều này yêu cầu phải bật Flash.

nguồn hiện đã chết: http://bravo9.com/journal/copying-text-into-the-clipboard-with-javascript-in-firefox-safari-ie-opera-292559a2-cc6c-4ebf-9724-d23e8bc5ad8a/ ( và đó là bộ nhớ cache của Google )

Bảng tính Trực tuyến móc các sự kiện Ctrl + C, Ctrl + V và chuyển tiêu điểm sang một điều khiển TextArea ẩn và đặt nội dung của nó thành nội dung khay nhớ tạm mới mong muốn để sao chép hoặc đọc nội dung của nó sau khi sự kiện kết thúc để dán.

xem thêm Có thể đọc khay nhớ tạm trong Firefox, Safari và Chrome bằng Javascript không?

Bây giờ là mùa hè năm 2015, và với rất nhiều xáo trộn xung quanh Flash, tôi nghĩ rằng tôi sẽ thêm một câu trả lời mới cho câu hỏi này để tránh hoàn toàn việc sử dụng nó.

clipboard.js là một tiện ích tuyệt vời cho phép sao chép dữ liệu văn bản hoặc html vào khay nhớ tạm. Nó rất dễ sử dụng, chỉ cần bao gồm .js và sử dụng một cái gì đó như sau:

<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 cũng có trên GitHub

Vào năm 2017, bạn có thể làm điều này (nói điều này vì chủ đề này đã gần 9 năm tuổi!)

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

Và bây giờ để sao chép copyStringToClipboard('Hello World')

Nếu bạn nhận thấy setDatadòng và tự hỏi liệu bạn có thể đặt các kiểu dữ liệu khác nhau hay không, câu trả lời là có.

Firefox cho phép bạn lưu trữ dữ liệu trong khay nhớ tạm, nhưng do các tác động bảo mật, nó bị tắt theo mặc định. Xem cách bật tính năng này trong "Cấp quyền truy cập JavaScript vào khay nhớ tạm" trong cơ sở kiến ​​thức Mozilla Firefox.

Giải pháp được cung cấp bởi amdfan là tốt nhất nếu bạn có nhiều người dùng và việc định cấu hình trình duyệt của họ không phải là một lựa chọn. Mặc dù bạn có thể kiểm tra xem clipboard có khả dụng hay không và cung cấp liên kết để thay đổi cài đặt, nếu người dùng hiểu biết về công nghệ. Trình soạn thảo JavaScript TinyMCE thực hiện theo cách tiếp cận này.

Hàm copyIntoClipboard () hoạt động với Flash 9, nhưng có vẻ như nó đã bị hỏng khi phát hành Flash player 10. Đây là giải pháp hoạt động với trình phát flash mới:

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

Đó là một giải pháp phức tạp, nhưng nó hoạt động.

Tôi phải nói rằng không có giải pháp nào trong số này thực sự hiệu quả. Tôi đã thử giải pháp khay nhớ tạm từ câu trả lời được chấp nhận và nó không hoạt động với Flash Player 10. Tôi cũng đã thử ZeroClipboard và tôi rất hài lòng với nó trong một thời gian.

Tôi hiện đang sử dụng nó trên trang web của riêng mình ( http://www.blogtrog.com ), nhưng tôi đã nhận thấy những lỗi kỳ lạ với nó. Cách thức hoạt động của ZeroClipboard là nó đặt một đối tượng flash vô hình lên đầu một phần tử trên trang của bạn. Tôi nhận thấy rằng nếu phần tử của tôi di chuyển (như khi người dùng thay đổi kích thước cửa sổ và tôi có mọi thứ được căn chỉnh phù hợp), đối tượng flash ZeroClipboard sẽ thoát ra ngoài và không còn che đối tượng nữa. Tôi nghi ngờ rằng nó có thể vẫn ngồi ở vị trí ban đầu. Họ có mã để ngăn chặn điều đó hoặc gắn lại nó vào phần tử, nhưng nó dường như không hoạt động tốt.

Vì vậy, ... trong phiên bản tiếp theo của BlogTrog, tôi đoán tôi sẽ làm theo tất cả các công cụ đánh dấu mã khác mà tôi đã từng thấy và xóa nút Sao chép vào Bảng tạm. :-(

(Tôi nhận thấy rằng Bản sao vào Bảng tạm của dp.syntaxhiglighter hiện cũng bị hỏng.)

câu hỏi quá cũ nhưng tôi không thấy câu trả lời này ở đâu ...

Kiểm tra liên kết này:

http://kb.mozillazine.org/Granting_JavaScript_access_to_the_clipboard

như mọi người đã nói, vì lý do bảo mật được tắt theo mặc định. liên kết ở trên hiển thị hướng dẫn cách bật nó (bằng cách chỉnh sửa about: config trong firefox hoặc user.js).

May mắn thay, có một plugin gọi là "AllowClipboardHelper" giúp mọi thứ dễ dàng hơn chỉ với một vài cú nhấp chuột. tuy nhiên bạn vẫn cần hướng dẫn khách truy cập trang web của mình cách kích hoạt quyền truy cập trong firefox.

Sử dụng document.execCommand hiện đại ("copy") và jQuery. Xem câu trả lời của stackoverflow này

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

Cách gọi:

 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>

Tôi đã sử dụng Clippy của Github cho nhu cầu của mình, nút dựa trên Flash đơn giản. Hoạt động tốt, nếu một người không cần tạo kiểu và hài lòng với việc chèn trước những gì cần dán vào phía máy chủ.

Một cải tiến nhỏ trên giải pháp Flash là phát hiện flash 10 bằng swfobject:

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

và sau đó nếu nó hiển thị dưới dạng flash 10, hãy thử tải đối tượng Shockwave bằng javascript. Shockwave có thể đọc / ghi vào khay nhớ tạm (trong tất cả các phiên bản) cũng như sử dụng lệnh copyToClipboard () trong biệt ngữ.

http://www.rodsdot.com/ee/cross_browser_clipboard_copy_with_pop_over_message.asp hoạt động với Flash 10 và tất cả các trình duyệt hỗ trợ Flash.

Ngoài ra, ZeroClipboard đã được cập nhật để tránh lỗi được đề cập về việc cuộn trang khiến phim Flash không còn ở đúng vị trí.

Vì phương pháp đó "Yêu cầu" người dùng nhấp vào nút để sao chép, đây là một sự thuận tiện cho người dùng và không có gì bất chính xảy ra.

hãy thử tạo một biến toàn cục bộ nhớ lưu trữ vùng chọn, sau đó hàm khác có thể truy cập vào biến đó và thực hiện dán chẳng hạn ..

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

}

Nếu bạn hỗ trợ flash, bạn có thể sử dụng https://everyplay.com/assets/clipboard.swf và sử dụng văn bản flashvars để đặt văn bản

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

Đó là cái tôi sử dụng để sao chép và bạn có thể đặt thêm nếu không hỗ trợ các tùy chọn này, bạn có thể sử dụng:

Đối với Internet Explorer: window.clipboardData.setData (DataFormat, Text) và window.clipboardData.getData (DataFormat)

Bạn có thể sử dụng Văn bản và Url của DataFormat để getData và setData.

Và để xóa dữ liệu:

Bạn có thể sử dụng Tệp, HTML, Hình ảnh, Văn bản và URL của DataFormat. PS: Bạn Cần Sử dụng window.clipboardData.clearData (DataFormat);

Và đối với các tệp flash khác không hỗ trợ window.clipboardData và swf, bạn cũng có thể sử dụng nút control + c trên bàn phím của mình đối với windows và mac của nó, lệnh + c

Từ mã addon:

Trong trường hợp bất kỳ ai khác đang tìm cách thực hiện điều đó từ mã chrome, bạn có thể sử dụng giao diện nsIClipboardHelper như được mô tả tại đây: https://developer.mozilla.org/en-US/docs/Using_the_Clipboard

Sử dụng document.execCommand('copy'). Được hỗ trợ trong phiên bản mới nhất của Chrome, Firefox, Edge, và 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>

API clipboard được thiết kế để thay thế document.execCommand. Safari vẫn đang làm việc về hỗ trợ, vì vậy bạn nên cung cấp dự phòng cho đến khi các thông số ổn định và Safari hoàn tất việc triển khai.

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>

Vì lý do bảo mật, khay nhớ tạm Permissionscó thể cần thiết để đọc và ghi từ khay nhớ tạm. Nếu đoạn mã không hoạt động trên SO hãy cung cấp cho nó localhosthoặc một miền đáng tin cậy khác.

Dựa trên câu trả lời tuyệt vời từ @David từ Studio.201, điều này hoạt động trong Safari, FF và Chrome. Nó cũng đảm bảo không xảy ra hiện tượng nhấp nháy textareabằng cách đặt nó ngoài màn hình.

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