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 sürüm 43'ten itibaren 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, kullanıcının panosuna bir e-posta adresini 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 panodan erişilebilir hale getirmek 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 şunları 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() çağrısından önce, bu API'nin document.queryCommandSupported() yöntemi kullanılarak 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 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 senaryolarda faydalıdır. Aksi takdirde, kullanıcıya bir mesaj sunulur.

Tarayıcı desteği

IE 10+, Chrome 43+, Firefox 41+ ve Opera 29+ bu komutları destekler.

Safari bu komutları desteklemiyor.

Bilinen Hatalar