JavaScript cut / copy / paste to clipboard: jak Google go rozwiązać?

Wiem, że to pytanie było napisane dawno temu, ale musiałem sprawdzić, jak google to robi, więc może komuś się to przyda.

Właściwie google używa również schowka systemowego, ale jest to trochę trudne. W przypadku użycia skrótu klawiaturowego można przechwycić Zdarzenie kopiuj / wklej/wytnij na np. window:

window.addEventListener('copy', function (ev) {
    console.log('copy event');
    // you can set clipboard data here, e.g.
    ev.clipboardData.setData('text/plain', 'some text pushed to clipboard');
    // you need to prevent default behaviour here, otherwise browser will overwrite your content with currently selected 
    ev.preventDefault();
});

Przykład na żywo skrótu klawiaturowego: http://jsfiddle.net/tyk9U/

Niestety jest to jedyne rozwiązanie dla skrótów klawiaturowych i jest problem z menu kontekstowe, ponieważ nie można uzyskać dostępu do danych schowka bez natywnego (zaufanego) zdarzenia Kopiuj/wytnij/wklej. Ale google robi ciekawe sztuczki. Istnieje API document.execCommand(), które pozwala na uruchamianie poleceń dla elementu contenteditable oraz polecenie 'copy', które można uruchomić za pomocą document.execCommand('copy'). Ale gdy spróbujesz tego w konsoli w Chrome zwróci false. Spędziłem trochę czasu badając to i okazało się, że mają zainstalowane rozszerzenie Chrome, o nazwie "Dysk Google" (przejdź do chrome://aplikacje/ i można go tam zobaczyć), który umożliwia dostęp do schowka dla domen drive.google.com oraz docs.google.com. Otwórz jakiś dokument lub arkusz kalkulacyjny i wpisz w konsoli document.execCommand('copy') - zwróci true. Po odinstalowaniu rozszerzenia nie będzie można używać operacji schowka z menu kontekstowego.

Możesz stworzyć taką aplikację dla siebie za pomocą bardzo prostego pliku manifestu (szczegóły tutaj https://developer.chrome.com/apps/first_app):

{
    "manifest_version": 2,
    "name": "App name",
    "description": "App description",
    "version": "1.0",
    "app": {
        "urls": [
            "http://your.app.url.here/"
        ],
        "launch": {
            "web_url": "http://your.app.url.here/"
        }
    },
    "icons": {
        "128": "x-128.png"
    },
    "permissions": [
        "clipboardRead",
        "clipboardWrite"
    ]
}

Pole" uprawnienia " umożliwia operacje schowka.

Teraz, gdy masz to włączone, możesz zrobić document.execCommand('copy') i będzie działać (zwróci true). Ale to nie wszystko - document.execCommand('copy') w chrome uruchamia Zdarzenie copy i można go złapać za pomocą tego samego kodu, który jest używany do przechwytywania skrótów klawiatury schowka. To jest teraz Google robi to.

Oczywiście ten opis jest ważny tylko dla Chrome.

Jako dodatek do tego, co inni już opublikowali w tym wątku, stworzyłem w pełni działający przykład, który demonstruje podejście do skrótów klawiaturowych (CTRL + C lub CMD + c na Mac OS X), a także niestandardowe podejście do przycisków, które uruchamia akcję kopiowania.

Pełne demo można znaleźć tutaj: http://jsfiddle.net/rve7d/

Znalazłem Mateusz W odpowiedzi bardzo przydatne podczas próby stworzenia tego demo, ale nie wziął pod uwagę wsparcia dla IE, który zachowuje się nieco inaczej i używa różnych typów danych jako pierwszego parametru.

if(window.clipboardData) {
    // use just 'Text' or 'Url' as a first param otherwise strange exception is thrown
    window.clipboardData.setData('Text', 'Text that will be copied to CB');        
} else if(ev.originalEvent.clipboardData) {
    ev.originalEvent.clipboardData.setData('text/plain', 'Text that will be copied to CB');      
} else {
    alert('Clipboard Data are not supported in this browser. Sorry.');
}

PS: potrzebowałem tej funkcjonalności dla naszego komponentu widoku arkusza kalkulacyjnego i po drodze analizowałem kod źródłowy arkuszy kalkulacyjnych Google, więc moje rozwiązanie jest w większości zgodne z ich rozwiązaniem.

Google używa bardzo prostej, ale fajnej metody. Używając firebug dowiesz się, że załadowany kod html ma obszar tekstowy na początku rozmiaru 1. To, co robi google doc, to to, że gdy użytkownik wybiera tekst i naciska ctrl + c, przechwytuje Zdarzenie i jakimś sposobem pobiera tekst, który jest zaznaczony w kontenerze doc i ustawia wartość obszaru tekstowego na tę zawartość. Następnie skupia się i zaznacza obszar tekstu. Teraz zwalnia Zdarzenie ctrl + C. Ale teraz tekst jest zaznaczony w tekście obszar więc gdy zdarzenie jest realeased przeglądarka kopiuje tekst w obszarze tekstowym i w ten sposób otrzymujemy skopiowany tekst

<p>COPY : </p>
<p>Email me at <a class="js-emaillink" href="mailto:[email protected]">[email protected]</a></p>
<p><button class="js-emailcopybtn" value="clipboard" >clipboard</button></p>
<textarea rows="10" cols = "12"></textarea>
<p>CUT: </p>
<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>
<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>
<script>
//copy clipboard
var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
  // Выборка ссылки с электронной почтой
  var emailLink = document.querySelector('.js-emaillink');
  var range = document.createRange();
  range.selectNode(emailLink);
  window.getSelection().addRange(range);
  try {
    // Теперь, когда мы выбрали текст ссылки, выполним команду копирования
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copy email command was ' + msg);
  } catch(err) {
    console.log('Oops, unable to copy');
  }
  // Снятие выделения - ВНИМАНИЕ: вы должны использовать
  // removeRange(range) когда это возможно
  window.getSelection().removeAllRanges();
});
//cut
var cutTextareaBtn = document.querySelector('.js-textareacutbtn');
cutTextareaBtn.addEventListener('click', function(event) {
  var cutTextarea = document.querySelector('.js-cuttextarea');
  cutTextarea.select();
  try {
    var successful = document.execCommand('cut');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Cutting text command was ' + msg);
  } catch(err) {
    console.log('Oops, unable to cut');
  }
});
</script>