Aktualizacja 2020 : wykorzystuje to rozwiązanie execCommand. Chociaż ta funkcja była odpowiednia w momencie pisania tej odpowiedzi, jest obecnie uważana za przestarzałą . Nadal będzie działać na wielu przeglądarkach, ale jego użycie jest odradzane, ponieważ wsparcie może zostać odrzucone.
Istnieje inny sposób inny niż Flash (oprócz Clipboard API wymienionego w odpowiedzi jfriend00 ). Musisz zaznaczyć tekst, a następnie wykonać polecenie,copy aby skopiować do schowka dowolny tekst zaznaczony na stronie.
Na przykład ta funkcja skopiuje zawartość przekazanego elementu do schowka (zaktualizowana sugestią w komentarzach PointZeroTwo ):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Tak to działa:
- Tworzy tymczasowo ukryte pole tekstowe.
- Kopiuje zawartość elementu do tego pola tekstowego.
- Wybiera zawartość pola tekstowego.
- Wykonuje kopię polecenia jak:
document.execCommand("copy").
- Usuwa tymczasowe pole tekstowe.
Tutaj możesz zobaczyć szybkie demo:
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
Główny problem polega na tym, że nie wszystkie przeglądarki obsługują obecnie tę funkcję, ale można jej używać w głównych z:
- Chrome 43
- Internet Explorer 10
- Firefox 41
- Safari 10
Aktualizacja 1: Można to osiągnąć również dzięki czystemu rozwiązaniu JavaScript (bez jQuery):
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
Zauważ, że przekazujemy identyfikator bez numeru # teraz.
Jak poinformował madzohan w komentarzach poniżej, w niektórych przypadkach występuje 64-bitowy problem z 64-bitową wersją przeglądarki Google Chrome (lokalne uruchamianie pliku). Wydaje się, że ten problem został rozwiązany w powyższym rozwiązaniu innym niż jQuery.
Madzohan próbował w Safari i rozwiązanie działało, ale używało document.execCommand('SelectAll')zamiast używać .select()(jak określono na czacie i w komentarzach poniżej).
Jak wskazuje PointZeroTwo w komentarzach , kod można ulepszyć, aby zwracał wynik powodzenia / niepowodzenia. Możesz zobaczyć demo na tym jsFiddle .
AKTUALIZACJA: KOPIUJ PRZECHOWYWANIE FORMATU TEKSTU
Jak wskazał użytkownik w hiszpańskiej wersji StackOverflow , powyższe rozwiązania działają idealnie, jeśli chcesz dosłownie skopiować zawartość elementu, ale nie działają tak dobrze, jeśli chcesz wkleić skopiowany tekst w formacie (jako jest kopiowany do input type="text"formatu, format jest „utracony”).
Rozwiązaniem tego byłoby skopiowanie do edytowalnej zawartości, diva następnie skopiowanie jej execCommandw podobny sposób. Oto przykład - kliknij przycisk kopiowania, a następnie wklej do pola edycji treści poniżej:
function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>
W jQuery wyglądałoby to tak:
function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand('selectAll',false,null); })
.focus();
document.execCommand("copy");
$temp.remove();
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>