Perintah potong dan salin

IE10 dan yang lebih baru menambahkan dukungan untuk 'cut' dan 'copy' menggunakan perintah Document.execCommand() . Mulai Chrome versi 43, perintah ini juga didukung di Chrome.

Setiap teks yang dipilih pada browser ketika salah satu perintah ini dijalankan akan dipotong atau disalin ke {i>clipboard<i} pengguna. Ini memungkinkan Anda menawarkan cara yang mudah untuk memilih sebagian teks dan menyalinnya ke {i>clipboard<i}.

Hal ini akan menjadi sangat berguna jika Anda menggabungkannya dengan Selection API untuk memilih teks secara terprogram untuk menentukan apa yang akan disalin ke {i>clipboard<i}, yang kita akan membahasnya lebih detail nanti dalam artikel ini.

Contoh Sederhana

Demi contoh, mari tambahkan tombol yang akan menyalin alamat email ke papan klip pengguna.

Kita menambahkan alamat email di HTML kita dengan sebuah tombol untuk memulai penyalinan saat diklik:

<p>Email me at <a class="js-emaillink" href="mailto:matt@example.co.uk">matt@example.co.uk</a></p>

<p><button class="js-emailcopybtn"><img src="./images/copy-icon.png" /></button></p>

Kemudian di JavaScript, kita ingin menambahkan pengendali peristiwa klik ke tombol di yang kita pilih teks alamat email dari anchor js-emaillink, jalankan salinan sehingga alamat email berada di {i>clipboard<i} pengguna dan kemudian kita membatalkan pilihan alamat email sehingga pengguna tidak melihat pilihan tersebut terjadi.

var copyEmailBtn = document.querySelector('.js-emailcopybtn');
copyEmailBtn.addEventListener('click', function(event) {
    // Select the email link anchor text
    var emailLink = document.querySelector('.js-emaillink');
    var range = document.createRange();
    range.selectNode(emailLink);
    window.getSelection().addRange(range);

    try {
    // Now that we've selected the anchor text, execute the copy command
    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');
    }

    // Remove the selections - NOTE: Should use
    // removeRange(range) when it is supported
    window.getSelection().removeAllRanges();
});

Yang kita lakukan di sini adalah menggunakan metode Selection API, window.getSelection() untuk menetapkan opsi 'selection' teks ke anchor, yang merupakan teks ingin disalin ke {i>clipboard<i} pengguna. Setelah memanggil document.execCommand() kita dapat menghapus pilihan dengan memanggil window.getSelection().removeAllRanges(). Jika Anda ingin mengonfirmasi bahwa semuanya bekerja seperti yang diharapkan, Anda dapat memeriksa respons document.execCommand(); yang dihasilkan adalah false jika perintah tidak didukung atau diaktifkan. Kita membungkus execCommand() dalam coba dan tangkap karena 'cut' dan 'copy' perintah dapat menimbulkan error dalam beberapa skenario.

'Potongan' perintah dapat digunakan untuk kolom teks tempat Anda ingin menghapus teks konten dan membuatnya dapat diakses melalui {i>clipboard<i}.

Menggunakan area teks dan tombol di HTML kita:

<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>

<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>

Kita dapat melakukan hal berikut untuk memotong konten:

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

queryCommandSupported dan queryCommandEnabled

Sebelum memanggil document.execCommand(), Anda harus memastikan bahwa API ini didukung menggunakan document.queryCommandSupported() . Dalam contoh kita di atas, kita dapat menetapkan keadaan tombol nonaktif berdasarkan yang mendukung seperti berikut:

copyEmailBtn.disabled = !document.queryCommandSupported('copy');

Perbedaan antara document.queryCommandSupported() dan document.queryCommandEnabled() adalah bahwa potong dan salin dapat didukung oleh browser, tetapi jika tidak ada teks yang dipilih saat ini, teks tersebut tidak akan diaktifkan. Hal ini berguna dalam skenario di mana Anda mengatur pemilihan teks secara terprogram dan ingin memastikan bahwa perintah akan berfungsi seperti yang diharapkan, jika tidak, menampilkan pesan kepada pengguna.

Dukungan Browser

IE 10+, Chrome 43+, Firefox 41+, dan Opera 29+ mendukung perintah ini.

Safari tidak mendukung perintah ini.

Bug yang Diketahui