Pembaruan 2020 : Solusi ini digunakan execCommand. Sementara fitur itu baik-baik saja pada saat menulis jawaban ini, sekarang dianggap usang . Ini masih akan berfungsi pada banyak browser, tetapi penggunaannya tidak disarankan karena dukungan dapat dibatalkan.
Ada cara non-Flash lain (selain dari Clipboard API yang disebutkan dalam jawaban jfriend00 ). Anda perlu memilih teks dan kemudian menjalankan perintahcopy untuk menyalin ke clipboard teks apa pun yang saat ini dipilih pada halaman.
Misalnya, fungsi ini akan menyalin konten elemen yang diteruskan ke clipboard (diperbarui dengan saran di komentar dari PointZeroTwo ):
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Begini Cara kerjanya:
- Membuat bidang teks yang sementara disembunyikan.
- Menyalin konten elemen ke bidang teks itu.
- Memilih konten bidang teks.
- Mengeksekusi perintah copy seperti:
document.execCommand("copy").
- Menghapus bidang teks sementara.
Anda dapat melihat demo cepat di sini:
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" />
Masalah utamanya adalah tidak semua browser mendukung fitur ini saat ini, tetapi Anda dapat menggunakannya pada yang utama dari:
- Chrome 43
- Internet Explorer 10
- Firefox 41
- Safari 10
Pembaruan 1: Ini dapat dicapai juga dengan solusi JavaScript murni (tanpa 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" />
Perhatikan bahwa kami melewatkan id tanpa # sekarang.
Sebagai madzohan dilaporkan dalam komentar di bawah, ada beberapa masalah aneh dengan versi 64-bit Google Chrome dalam beberapa kasus (menjalankan file secara lokal). Masalah ini tampaknya diperbaiki dengan solusi non-jQuery di atas.
Madzohan mencoba di Safari dan solusinya berhasil tetapi menggunakan document.execCommand('SelectAll')alih-alih menggunakan.select() (sebagaimana ditentukan dalam obrolan dan di komentar di bawah).
Seperti yang ditunjukkan PointZeroTwo dalam komentar , kode dapat ditingkatkan sehingga akan mengembalikan hasil keberhasilan / kegagalan. Anda dapat melihat demo di jsFiddle ini .
UPDATE: COPY MENJAGA FORMAT TEKS
Seperti yang ditunjukkan oleh pengguna dalam StackOverflow versi Spanyol , solusi yang tercantum di atas berfungsi dengan baik jika Anda ingin menyalin konten elemen secara harfiah, tetapi mereka tidak berfungsi dengan baik jika Anda ingin menempelkan teks yang disalin dengan format (seperti itu disalin ke dalam input type="text", formatnya "hilang").
Solusi untuk itu adalah menyalin ke suatu konten yang dapat diedit divdan kemudian menyalinnya dengan execCommandcara yang serupa. Di sini ada contoh - klik pada tombol salin dan kemudian rekatkan ke kotak konten yang dapat diedit di bawah ini:
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>
Dan di jQuery, akan seperti ini:
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>