Pytanie Jak skopiować do schowka w JavaScript?


Jaki jest najlepszy sposób kopiowania tekstu do schowka? (wiele przeglądarek)

Próbowałem:

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

ale w przeglądarce Internet Explorer daje błąd składni. W Firefoksie jest napisane unsafeWindow is not defined.

Niezła sztuczka bez flasha: W jaki sposób Trello uzyskuje dostęp do schowka użytkownika?


2670
2017-12-30 13:09


pochodzenie


Nic specjalnego. Mogą to zrobić samodzielnie, ale chcę zaoferować również możliwość kliknięcia przycisku bez obawy o wybranie właściwej części tekstu. - Santiago Corredoira
możliwy duplikat Umieść tekst w schowku za pomocą FireFox, Safari i Chrome - GvS
Ten długi wpis na blogu zawiera wiele sposobów na zrobienie tego: Dostęp do Schowka systemowego za pomocą JavaScript - A Holy Grail? - Aaron Digulla
Daje to nieokreślonemu wyjątkowi przeglądarki w IE, a także w FF - Jagadeesh
Jeśli umieścimy tekst w schowku użytkownika, możemy zrujnować jego schowek. - Frank Fang


Odpowiedzi:


Przegląd

Istnieją 3 podstawowe interfejsy API przeglądarki do kopiowania do schowka:

  1. Async Clipboard API  [navigator.clipboard.writeText]
    • Część tekstowa dostępna w Chrome 66 (marzec 2018)
    • Dostęp jest asynchroniczny i używa Obietnice JavaScript, można napisać tak, aby zachęty użytkowników (jeśli były wyświetlane) nie przerywały strony JavaScript na stronie.
    • Tekst można skopiować do schowka bezpośrednio ze zmiennej.
    • Obsługiwany tylko na stronach obsługiwanych przez HTTPS.
    • W Chrome 66 stron w aktywnych kartach może pisać do schowka bez pytania o uprawnienia.
  2. document.execCommand('copy')
    • Większość przeglądarek obsługuje tę funkcję od kwietnia 2015 r. (Patrz Wsparcie dla przeglądarek poniżej).
    • Dostęp jest synchroniczny, tzn. Zatrzymuje JavaScript na stronie aż do zakończenia, włączając wyświetlanie i interakcję użytkownika z dowolnymi monitami bezpieczeństwa.
    • Tekst jest odczytywany z DOM i umieszczany w schowku.
    • Podczas testów ~ kwietnia 2015 tylko Internet Explorer został zauważony jako wyświetlający monity uprawnień podczas pisania do schowka.
  3. Przesłanianie zdarzenia kopiowania
    • Zobacz dokumentację interfejsu API Schowka na Przesłanianie zdarzenia kopiowania.
    • Umożliwia modyfikowanie elementów pojawiających się w schowku podczas dowolnego zdarzenia kopiowania, może zawierać inne formaty danych poza zwykłym tekstem.
    • Nie obejmuje tutaj, ponieważ nie odpowiada bezpośrednio na pytanie.

Ogólne uwagi dotyczące rozwoju

Nie oczekuj, że polecenia związane ze schowkiem będą działać podczas testowania kodu w konsoli. Ogólnie strona musi być aktywna (Async Clipboard API) lub wymaga interakcji użytkownika (np. Kliknięcia użytkownika), aby zezwolić (document.execCommand('copy')) aby uzyskać dostęp do schowka, patrz poniżej, aby uzyskać więcej szczegółów.

Asynchroniczne + awaryjne

Ze względu na poziom obsługi przeglądarki dla nowego interfejsu Async Clipboard API prawdopodobnie będziesz chciał wrócić do document.execCommand('copy') metoda uzyskania dobrego zasięgu przeglądarki.

Oto prosty przykład:

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>

Zauważ, że ten fragment nie działa dobrze w osadzonym podglądu StackOverflow, możesz go wypróbować tutaj: https://codepen.io/DeanMarkTaylor/pen/RMRaJX?editors=1011

Async Clipboard API

Zauważ, że istnieje możliwość "zażądania pozwolenia" i przetestowania dostępu do schowka za pomocą API uprawnień w przeglądarce Chrome 66.

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 ("kopia")

Reszta tego postu idzie w niuanse i szczegóły document.execCommand('copy') API.

Obsługa przeglądarki

JavaScript document.execCommand('copy') wsparcie wzrosło, zobacz poniższe linki do aktualizacji przeglądarki:

Prosty przykład

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>

Przykład złożony: Kopiuj do schowka bez wyświetlania danych wejściowych

Powyższy prosty przykład działa świetnie, jeśli istnieje textarea lub input element widoczny na ekranie.

W niektórych przypadkach możesz skopiować tekst do schowka bez wyświetlania znaku input / textarea element. Jest to jeden z przykładów sposobu obejścia tego (w zasadzie wstaw element, skopiuj do schowka, usuń element):

Przetestowano w Google Chrome 44, Firefox 42.0a1 i IE 11.0.8600.17814.

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>

Dodatkowe uwagi

Działa tylko wtedy, gdy użytkownik podejmuje działanie

Wszystko document.execCommand('copy') połączenia muszą być bezpośrednim skutkiem działania użytkownika, np. kliknij moduł obsługi zdarzeń. Jest to środek zapobiegający zakłócaniu pracy ze schowkiem użytkownika, gdy go nie oczekują.

Zobacz Google Developers publikuj tutaj po więcej informacji.

Interfejs API schowka

Uwaga: pełną wersję roboczą interfejsu API schowka można znaleźć tutaj: https://w3c.github.io/clipboard-apis/

Czy jest obsługiwany?

  • document.queryCommandSupported('copy') powinien powrócić true jeśli polecenie "jest obsługiwane przez przeglądarkę".
  • i document.queryCommandEnabled('copy') powrót true jeśli document.execCommand('copy') odniesie sukces, jeśli zostanie teraz wywołany. Sprawdzanie, czy wywoływana jest komenda z wątku inicjowanego przez użytkownika i spełnione są inne wymagania.

Jednak jako przykład problemów ze zgodnością przeglądarki, przeglądarka Google Chrome w okresie od kwietnia do października 2015 r. Wróciła tylko true od document.queryCommandSupported('copy') jeśli polecenie zostało wywołane z wątku zainicjowanego przez użytkownika.

Uwaga szczegóły kompatybilności poniżej.

Szczegóły zgodności przeglądarki

Podczas prostego połączenia z document.execCommand('copy') owinięte w try/catch blok wywoływany w wyniku kliknięcia przez użytkownika spowoduje uzyskanie największej kompatybilności, a następująca ma pewne ograniczenia:

Każde połączenie z document.execCommand, document.queryCommandSupported lub document.queryCommandEnabled powinien być owinięty w try/catch blok.

Różne wersje przeglądarek i wersje przeglądarek wyrzucają różne typy wyjątków po wywołaniu zamiast zwracania false.

Różne implementacje przeglądarki są nadal w strumieniu i Interfejs API schowka jest nadal w fazie roboczej, więc pamiętaj o wykonaniu testów.


1593
2018-06-12 18:56



jak kopiować bezpośrednio ze zmiennych danych .i.e .: var str = "word"; ? - jscripter
@BubuDaba Utworzyć manekina ukryte <textarea> z JS, dołącz to do document.body, ustaw jej wartość na zmienną i użyj jej w tempie copyTextarea, a następnie usuń go zaraz po skopiowaniu zawartości. - SeinopSys
Czy jest coś dla Safari lub jakieś wskaźniki, które zostaną zaimplementowane w Safari? - www139
@AyaSalama najważniejsze jest to, że akcja "kopia" nie może się odbyć, chyba że pojawi się w przeglądarce użytkownika, który wykonuje akcję. Użytkownik nie mógłby wykonać akcji, jeśli element ma styl "display: none", ponieważ nie byłby w stanie go zobaczyć ani nie wchodził z nim w interakcję. - Dean Taylor
Czy to działa dla iPhone'a Safari? - SB2055


Automatyczne kopiowanie do schowka może być niebezpieczne, dlatego większość przeglądarek (z wyjątkiem IE) bardzo utrudnia. Osobiście używam następującej prostej sztuczki:

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

Użytkownikowi wyświetla się okienko, w którym tekst do skopiowania jest już wybrany. Teraz wystarczy nacisnąć Ctrl+do i Wchodzić (aby zamknąć pudełko) - i voila!

Teraz operacja kopiowania schowka jest BEZPIECZNA, ponieważ użytkownik robi to ręcznie (ale w dość prosty sposób). Oczywiście działa we wszystkich przeglądarkach.

<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



Dobra sztuczka - ale pamiętaj, że to Cmd-C dla Mac - Casebash
Sprytnie, ale to obsługuje tylko jedną linię. - Aram Kocharyan
Zmiana funkcji "monit" na niestandardowy modalnie jest trywialne, mięsną lewą jest użycie edytowalnego pola treści i wstępny wybór tekstu oraz to, że nie łamie on interfejsu użytkownika przeglądarki przez wymuszenie, że użytkownik podejmuje same działania. A ++ - Jon z
nadal nie używając javascript do skopiowania do schowka ^ _ ^ - RozzA
Dziwne, że to 457 upvotes, podczas gdy nie odpowiada na pytanie: skopiuj do schowka w JavaScript! - stevenvh


Poniższe podejście działa w przeglądarce Chrome, Firefox, Internet Explorer i Edge oraz w najnowszych wersjach Safari (funkcja kopiowania została dodana w wersji 10, która ukazała się w październiku 2016 r.).

  • Utwórz obszar tekstowy i ustaw jego zawartość na tekst, który chcesz skopiować do schowka.
  • Dołącz textarea do DOM.
  • Wybierz tekst w obszarze tekstowym.
  • Zadzwoń do document.execCommand ("copy")
  • Usuń textarea z domingu.

Uwaga: nie zobaczysz obszaru tekstowego, ponieważ jest on dodawany i usuwany w ramach tego samego synchronicznego wywołania kodu JavaScript.

Kilka rzeczy, na które należy zwrócić uwagę, jeśli wykonujesz to sam:

  • Ze względów bezpieczeństwa można to wywołać tylko z procedury obsługi zdarzeń, takiej jak kliknięcie (podobnie jak w przypadku otwierania okien).
  • IE pokaże okno dialogowe uprawnień przy pierwszej aktualizacji schowka.
  • IE i Edge będą przewijane, gdy obszar tekstowy jest skupiony.
  • execCommand () może w niektórych przypadkach rzucić.
  • Newlines i tabulatory mogą zostać połknięte, chyba że użyjesz obszaru tekstowego. (Większość artykułów wydaje się polecać używanie div)
  • Obszar tekstowy będzie widoczny podczas wyświetlania okna dialogowego IE, musisz go ukryć lub użyć interfejsu API clipboardData specyficznego dla IE.
  • W systemie IE administratorzy systemu mogą wyłączyć interfejs API schowka.

Poniższa funkcja powinna obsłużyć wszystkie następujące problemy tak czysto, jak to możliwe. Proszę zostawić komentarz, jeśli napotkasz jakieś problemy lub masz jakieś sugestie dotyczące jego poprawy.

// 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



Dobra odpowiedź: obsługa wielu przeglądarek, obsługa błędów + czyszczenie. Od dzisiaj nowe wsparcie dla queryCommandSupported, kopiowanie do schowka jest teraz możliwe w JavaScript i powinno to być akceptowaną odpowiedzią, zamiast kłopotliwego obejścia "window.prompt (" Kopiuj do schowka: Ctrl + C, Enter ", tekst). window.clipboardData jest obsługiwany w IE9, więc powinieneś dodać IE9 na liście wsparcia przeglądarki i myślę, że może IE8 i poprzedni również, ale muszę to zweryfikować. - user627283
Tak. IE 8/9 Powinno być w porządku. Nasza aplikacja ich nie obsługuje. Więc nie testowałem. IE przerywa wsparcie w styczniu, więc nie jestem zbyt wytrącony z równowagi. Mam nadzieję, że wsparcie Safari wkrótce wyląduje. Jestem pewien, że jest na ich radarze. - Greg Lowe
@SantiagoCorredoira: W 2016 r. Zasługuje na zaakceptowaną odpowiedź. Proszę rozważyć zmianę przydziału na BGT (duży zielony tick). - Lawrence Dol
@Noitidart I Tested i działa idealnie dla Firefoxa 54, Chrome 60 i przeglądarki krawędziowej, nawet jeśli fokus nie znajduje się w dokumencie HTML, błąd, który masz, jest prawdopodobnie specyficzny dla wersji FF 55 - Tosin John
@Noitidart To wciąż działa tutaj idealnie, skupienie się na narzędziach programistycznych nie powstrzymało tego. A tak przy okazji, co zwykły użytkownik aplikacji internetowej robi na narzędziach programistycznych - Tosin John


Jeśli potrzebujesz naprawdę prostego rozwiązania (zajmuje mniej niż 5 minut na integrację) i wygląda dobrze zaraz po wyjęciu z pudełka, to Clippy jest dobrą alternatywą dla niektórych bardziej złożonych rozwiązań.

Clippy

Został napisany przez współzałożyciela Githuba. Przykładowy kod do umieszczenia na stronie Flash poniżej:

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

Pamiętaj, aby wymienić #{text} z tekstem, który potrzebujesz skopiować, i #{bgcolor} z kolorem.


93
2017-10-17 14:40



Dla wszystkich zainteresowanych sprawdź, czy Clippy jest używany na GitHub podczas kopiowania adresu URL dla repozytorium. - Radek
FYI, użycie Clippy na GitHub zostało zastąpione przez ZeroClipboard. - James M. Greene
OP chciał rozwiązania w JavaScript. Nie flash. - MT.
@MT, przez "javascript" niektórzy ludzie rozumieją "w kliencie przeglądarki", więc chociaż JS-only może być wymogiem, wiele osób, które mają szansę na tę odpowiedź, naprawdę szuka JS-lub-innego-szeroko wspieranego- klient-tech. Flash nie trafia na wszystkie platformy, ale dla funkcji polskiej, takiej jak obsługa schowka, warto dodać, czy poprawia UX w wyskakującym okienku dialogowym (co z pewnością robi). - Dave Dopson
Teraz poleganie na Flashie oznacza, że ​​rzeczy nie działają dla procentu użytkowników witryny, co jest niedopuszczalne dla prawie wszystkich użytkowników zajmujących się tworzeniem stron internetowych. - jinglesthula


Czytanie i modyfikowanie schowka ze strony internetowej budzi obawy związane z bezpieczeństwem i prywatnością. Jednak w Internet Explorerze można to zrobić. znalazłem to przykładowy fragment:

    <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



Używanie flasha do prostej operacji kopiowania wydaje się przesadą, cieszę się, że był to czysty sposób JS. A ponieważ jesteśmy w środowisku korporacyjnym. IE jest w porządku. Dzięki Bandi! - Eddie
plz wyjaśnij co execCommand(\\’copy\\’); czy, jeśli nie skopiować do schowka do IE? @mrBorna - RozzA
działa dobrze w IE7-IE9, dziękuję! - luschn
Nie używaj if(!document.all) ale if(!r.execCommand) aby ktokolwiek inny to zaimplementował! Document.all jest absolutnie nieistotne. - m93a
Człowieku, to jest to, co uwielbiam w prostym i czystym kodzie, działa prawie na zawsze z drobnymi zabiegami konserwacyjnymi. Zrobiłem to dla mnie, działa pięknie. - Samuel Ramzan


Niedawno napisałem techniczny post na blogu w tym właśnie problemie (pracuję w Lucidchart i niedawno przeprowadziliśmy remont w naszym schowku).

Kopiowanie zwykłego tekstu do schowka jest stosunkowo proste, zakładając, że chcesz to zrobić podczas zdarzenia kopiowania systemu (naciśnięcia użytkownika Ctrldo lub korzysta z menu przeglądarki).

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

Umieszczanie tekstu w schowku nie podczas zdarzenia kopiowania systemu jest znacznie trudniejsze. Wygląda na to, że niektóre z tych innych odpowiedzi wskazują na to, jak zrobić to za pomocą Flasha, który jest jedynym sposobem na zrobienie tego w różnych przeglądarkach (o ile rozumiem).

Poza tym istnieje kilka opcji dla poszczególnych przeglądarek.

Jest to najprostsze w IE, gdzie można uzyskać dostęp do obiektu clipboardData w dowolnym momencie z JavaScript poprzez:

window.clipboardData

(Gdy spróbujesz zrobić to poza zdarzeniem związanym z cięciem, kopiowaniem lub wklejaniem systemu, IE poprosi użytkownika o nadanie uprawnień do schowka aplikacji internetowej).

W Chrome możesz utworzyć rozszerzenie do przeglądarki Chrome uprawnienia do schowka (to jest to, co robimy dla Lucidchart). Następnie dla użytkowników z zainstalowanym rozszerzeniem wystarczy samodzielnie wystrzelić zdarzenie systemowe:

document.execCommand('copy');

Wygląda na to, że Firefox ma niektóre opcje które umożliwiają użytkownikom przyznawanie uprawnień do niektórych witryn w celu uzyskania dostępu do schowka, ale nie próbowałem żadnej z nich osobiście.


65
2017-12-03 20:31



Nie wspomniano w poście na blogu (mam nadzieję na aktualizację w niedalekiej przyszłości), jest możliwość wywołania cut i copy przy użyciu execCommand. Jest to obsługiwane w IE10 +, Chrome 43+ i Opera29 +. Przeczytaj o tym tutaj. updates.html5rocks.com/2015/04/cut-and-copy-commands - Richard Shurtz
Problem polega na tym, że przechwytuje inne normalne zdarzenia kopiowania. - Brock Adams


clipboard.js to małe, nie flashowe narzędzie, które umożliwia kopiowanie danych tekstowych lub html do schowka. Jest bardzo łatwy w użyciu, wystarczy dołączyć .js i użyć czegoś takiego:

<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 jest również włączony GitHub


44
2017-08-11 15:33



Ta biblioteka jest używana przez angular.io do jej Tour of Hero i powrotu do trybu wdzięku dla przeglądarki, która nie obsługuje execCommand, wyświetlając wstępnie zaznaczony tekst, który użytkownik właśnie skopiował. - John-Philip


ZeroClipboard to najlepsze rozwiązanie dla różnych przeglądarek, które znalazłem:

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

Jeśli potrzebujesz wsparcia typu "flash" dla iOS, po prostu dodaj fall-back:

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



przeglądarka z Flash? nie działa w systemach iOS i Android 4.4 - Raptor
Zobacz zaktualizowaną odpowiedź. Pozwala to na mniejszą liczbę kroków dla użytkowników flash i powrót dla wszystkich pozostałych. - Justin
ma miliard linii kodu. to absolutnie niedorzeczność. lepiej nie robić tego wcale, niż włączać takiego potwora do projektu - vsync
Istnieje prosta wersja gist.github.com/JamesMGreene/8698897to jest 20K, które nie ma wszystkich dzwonków i gwizdków w wersji 74k. Żadne nie jest bardzo duże. Domyślam się, że większość użytkowników jest w porządku z dodatkowymi milisekundami, że pobranie pliku 74k lub 20k zajmie skopiowanie / wklejenie to jedno kliknięcie zamiast dwóch. - Justin
@ Justin Po prostu nie mogę działać lokalnie, nawet jeśli skopiuję i wkleję przykłady (wprowadzam minimalne zmiany, np. Wartość src w znacznikach skryptu). Uważam, że ich dokumentacja jest ładna, ale nieskuteczna. - Gui Imamura


Oto moje podejście do tego ..

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



Pracowałem przy pierwszej próbie. Twoje zdrowie. - JustAGuy
Cieszę się, że mogę pomóc. - nikksan
Działa jak urok, dzięki za pomoc. +1 - FONGOH MARTIN
@nikksan jak skopiować ciąg z \n? - sof-03
Nie działa w Microsoft Edge 42.17134.1.0 na Win10x64 - Honsa Stunna


Z jednego z projektów, nad którymi pracowałem, wtyczka jQuery typu copy-to-clipboard, która wykorzystuje Zero Clipboard biblioteka.

Jest łatwiejszy w użyciu niż natywna wtyczka Zero Clipboard, jeśli jesteś ciężkim użytkownikiem jQuery.


25
2018-05-03 22:17



92kb nie jest aż tak bardzo ważne, działa szybko i można z niego korzystać text() zamiast innerHTML() Jeśli lubisz.. - RozzA
@Jan: innerHTML jest już obsługiwany przez wiele przeglądarek od dłuższego czasu. Tylko dlatego, że Microsoft wpadł na pomysł, nie czyni go niewiarygodnym ani zastrzeżonym. Jest także teraz Wreszcie dodano do oficjalnej specyfikacji (po tym, jak każdy większy producent przeglądarki już dodał obsługę tego ... westchnienie). - James M. Greene
@John Narzekasz, że jQuery nie jest wystarczająco JavaScripty w odpowiedzi używającej Flash;) - Max Nanasy
innerHTML jest w większości przypadków lepszy niż alternatywy. Przystopuj! Jest szybszy, wydajniejszy i nie wymaga ponownego renderowania strony. - Orbiting Eden
@RozzA 92KB jest naprawdę duży. Aż do LTE dojrzewa GPRS jest WW mobilny standard danychi zaczyna się od 1 KB/s. Wykonaj matematykę samodzielnie. - Tino