Komutları kesme ve kopyalama

Matt Gaunt
X Ana sayfa

IE10 ve sonraki sürümlerde, Document.execCommand() yöntemi aracılığıyla "kes" ve "kopyala" komutları için destek eklendi. Chrome 43 sürümü itibarıyla bu komutlar Chrome'da da desteklenmektedir.

Bu komutlardan biri yürütüldüğünde tarayıcıda seçili olan tüm metinler kesilir veya kullanıcının panosuna kopyalanır. Bu sayede kullanıcıya metnin bir bölümünü seçip panosuna kopyalamanın basit bir yolunu sunabilirsiniz.

Bu API, Selection API ile birlikte kullanıldığında son derece kullanışlı hale gelir. Bu API, nelerin panoya kopyalanacağını belirlemek için metni programatik olarak seçmenize olanak tanır. Bu konuyu makalenin ilerleyen bölümlerinde daha ayrıntılı olarak ele alacağız.

Basit Örnek

Örneğin, bir e-posta adresini kullanıcının panosuna kopyalayan bir düğme ekleyelim.

E-posta adresini, tıklandığında kopyalama işlemini başlatacak bir düğmeyle HTML'mize ekleriz:

<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>

Ardından JavaScript'imizde düğmemize bir tıklama etkinliği işleyici eklemek istiyoruz. Bu işleyicide, js-emaillink anköründeki e-posta adresi metnini seçeriz, e-posta adresinin kullanıcının panosuna kopyalanmasını sağlayan bir kopyalama komutu yürütürüz ve ardından kullanıcının seçimi görmesini engellemek için e-posta adresinin seçimini kaldırırız.

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

Burada, metnin "seçimini" programatik olarak ankaraya (kullanıcı panosuna kopyalamak istediğimiz metin) ayarlamak için Selection API'nin bir yöntemini (window.getSelection()) kullanıyoruz. document.execCommand() çağrıldıktan sonra window.getSelection().removeAllRanges() çağrılarak seçimi kaldırabiliriz. Her şeyin beklendiği gibi çalıştığını onaylamak istiyorsanız document.execCommand() işlevinin yanıtını inceleyebilirsiniz. Komut desteklenmiyorsa veya etkinleştirilmemişse yanlış değerini döndürür. "kes" ve "kopyala" komutları bazı senaryolarda hata oluşturabileceğinden execCommand() işlevini bir try ve catch içine sarmalıyoruz.

"kes" komutu, metin içeriğini kaldırmak ve metne not defteri üzerinden erişmek istediğiniz metin alanları için kullanılabilir.

HTML'mizde bir metin alanı ve düğme kullanarak:

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

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

İçeriği kesmek için aşağıdakileri yapabiliriz:

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 ve queryCommandEnabled

document.execCommand() işlevini çağırmadan önce, document.queryCommandSupported() yöntemini kullanarak bu API'nin desteklendiğinden emin olmanız gerekir. Yukarıdaki örneğimizde, düğmenin devre dışı durumunu desteğe göre aşağıdaki gibi ayarlayabiliriz:

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

document.queryCommandSupported() ile document.queryCommandEnabled() arasındaki fark, kesme ve kopyalama işleminin bir tarayıcı tarafından desteklenmesidir. Ancak şu anda seçili bir metin yoksa bu işlemler etkinleştirilmez. Bu, metin seçimini programatik olarak ayarlamadığınız ve komutun beklendiği gibi çalışacağından emin olmak istediğiniz ya da aksi takdirde kullanıcıya bir mesaj göstermek istediğiniz senaryolarda kullanışlıdır.

Tarayıcı desteği

IE 10 ve sonraki sürümler, Chrome 43 ve sonraki sürümler, Firefox 41 ve sonraki sürümler ve Opera 29 ve sonraki sürümler bu komutları destekler.

Safari bu komutları desteklemez.

Bilinen hatalar