Perintah potong dan salin

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

Setiap teks yang dipilih di browser saat salah satu perintah ini dijalankan akan dipotong atau disalin ke papan klip pengguna. Dengan begitu, Anda dapat menawarkan cara sederhana kepada pengguna untuk memilih sebagian teks dan menyalinnya ke papan klip.

Hal ini menjadi sangat berguna saat Anda menggabungkannya dengan Selection API untuk memilih teks secara terprogram untuk menentukan apa yang disalin ke papan klip, yang akan kita bahas secara lebih mendetail nanti dalam artikel ini.

Contoh Sederhana

Misalnya, mari kita tambahkan tombol yang menyalin alamat email ke papan klip pengguna.

Kita menambahkan alamat email di HTML dengan 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 tempat kita memilih teks alamat email dari anchor js-emaillink, mengeksekusi perintah salin sehingga alamat email berada di papan klip pengguna, lalu kita membatalkan pilihan alamat email sehingga pengguna tidak melihat pemilihan 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 'pilihan' teks ke anchor secara terprogram, yang merupakan teks yang ingin kita salin ke papan klip pengguna. Setelah memanggil document.execCommand(), kita dapat menghapus pilihan dengan memanggil window.getSelection().removeAllRanges(). Jika ingin mengonfirmasi bahwa semuanya berfungsi seperti yang diharapkan, Anda dapat memeriksa respons document.execCommand(); fungsi ini akan menampilkan nilai salah jika perintah tidak didukung atau diaktifkan. Kita menggabungkan execCommand() dalam try dan catch karena perintah 'cut' dan 'copy' dapat menampilkan error dalam beberapa skenario.

Perintah 'potong' dapat digunakan untuk kolom teks tempat Anda ingin menghapus konten teks dan membuatnya dapat diakses melalui papan klip.

Menggunakan textarea dan tombol di HTML:

<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 metode document.queryCommandSupported(). Pada contoh di atas, kita dapat menetapkan status tombol dinonaktifkan berdasarkan dukungan seperti ini:

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

Perbedaan antara document.queryCommandSupported() dan document.queryCommandEnabled() adalah bahwa tindakan potong dan salin dapat didukung oleh browser, tetapi jika saat ini tidak ada teks yang dipilih, tindakan tersebut tidak akan diaktifkan. Hal ini berguna dalam skenario saat Anda tidak menetapkan pilihan teks secara terprogram dan ingin memastikan perintah akan berfungsi seperti yang diharapkan, jika tidak, tampilkan 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