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 dieksekusi akan dipotong atau disalin ke papan klip pengguna. Hal ini memungkinkan Anda menawarkan cara mudah kepada pengguna untuk memilih sebagian teks dan menyalinnya ke papan klip.

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

Contoh Sederhana

Sebagai contoh, 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, menjalankan perintah penyalinan sehingga alamat email ada di papan klip pengguna, lalu kita membatalkan pilihan alamat email sehingga pengguna tidak melihat pilihan tersebut.

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 'pemilihan' teks ke anchor secara terprogram, yaitu teks yang ingin disalin ke papan klip pengguna. Setelah memanggil document.execCommand(), kita dapat menghapus pilihan dengan memanggil window.getSelection().removeAllRanges(). Jika ingin mengonfirmasi semuanya berfungsi seperti yang diharapkan, Anda dapat memeriksa respons document.execCommand(); parameter ini menampilkan nilai false jika perintah tidak didukung atau diaktifkan. Kita menggabungkan execCommand() dalam upaya coba dan tangkap karena perintah 'cut' dan 'copy' dapat menimbulkan error dalam beberapa skenario.

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

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

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

Perbedaan antara document.queryCommandSupported() dan document.queryCommandEnabled() adalah bahwa fitur potong dan salin dapat didukung oleh browser, tetapi jika tidak ada teks yang dipilih saat ini, teks tidak akan diaktifkan. Hal ini berguna dalam skenario saat Anda tidak menyetel pemilihan 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