Komutları kesme ve kopyalama

Matt Gaunt
X Ana sayfa

IE10 ve üzeri sürümlerde, Document.execCommand() yöntemi aracılığıyla "cut" ve "copy" 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çilen metinler kesilir veya kullanıcının panosuna kopyalanır. Bu, kullanıcıya metnin bir bölümünü seçip panoya kopyalaması için basit bir yol sunmanızı sağlar.

Bu, panoya neyin kopyalanacağını belirlemek için programlı bir şekilde metin seçmek için bunu Selection API ile birleştirdiğinizde son derece faydalı hale gelir. Bu makalenin ilerleyen bölümlerinde bunu daha ayrıntılı olarak inceleyeceğiz.

Basit Örnek

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

E-posta adresini, tıklandığında kopyalamayı başlatacak bir düğmeyle birlikte 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'te, düğmemize bir tıklama etkinliği işleyicisi eklemek istiyoruz. Bu işlemde js-emaillink bağlantısından e-posta adresi metnini seçiyoruz, e-posta adresi kullanıcının panosunda yer alacak şekilde bir kopyalama komutu yürütüyoruz ve kullanıcının seçimi görmemesi için e-posta adresinin seçimini kaldırıyoruz.

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", kullanıcının panosuna kopyalamak istediğimiz metin olan bağlantıya programlı bir şekilde ayarlamak için bir Selection API, window.getSelection() yöntemini kullanıyoruz. document.execCommand() çağrısından sonra, window.getSelection().removeAllRanges() işlevini çağırarak seçimi kaldırabiliriz. Her şeyin beklendiği gibi çalıştığını onaylamak istiyorsanız document.execCommand() yanıtını inceleyebilirsiniz. Komut desteklenmiyorsa veya etkinleştirilmezse, false döndürülür. "cut" ve "copy" komutları birkaç senaryoda hataya yol açabileceğinden execCommand() API'yi bir "deneyim" ve yakalama yöntemiyle sarmalarız.

"Kes" komutu, metin içeriğini kaldırmak ve pano aracılığıyla içeriğe erişmek istediğiniz metin alanları için kullanılabilir.

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

<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() yöntemini çağırmadan önce bu API'nin document.queryCommandSupported() yöntemi kullanılarak desteklendiğinden emin olmalısınız. Yukarıdaki örneğimizde, aşağıdaki gibi desteğe bağlı olarak düğmenin devre dışı durumunu ayarlayabiliriz:

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

document.queryCommandSupported() ile document.queryCommandEnabled() arasındaki fark, kesme ve kopyalama işleminin bir tarayıcı tarafından desteklenebilmesidir, ancak o anda hiçbir metin seçilmezseler etkinleştirilmez. Bu yöntem, metin seçimini programatik olarak yapmadığınız ve komutun beklendiği gibi yapacağından emin olmak istediğiniz durumlarda yararlıdır. Aksi takdirde, kullanıcıya bir mesaj sunabilirsiniz.

Tarayıcı Desteği

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

Safari bu komutları desteklemez.

Bilinen Hatalar