Komutları kesme ve kopyalama

Matt Gaunt
X Ana sayfa

IE10 ve üzeri "kesim" desteği ve "kopyala" CANNOT TRANSLATE Document.execCommand() yöntemidir. 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 herhangi bir metin kesilmesi veya kullanıcının panosuna kopyalanması. Bu, kullanıcıya basit bir yöntem sunmanızı sağlar metnin bir bölümünü seçip panoya kopyalayın.

Bu API, Selection API ile birleştirildiğinde son derece faydalı hale gelir. panoya nelerin kopyalanacağını belirlemek için programatik olarak metni seçer ve bu makalenin ilerleyen bölümlerinde daha ayrıntılı olarak ele alacağız.

Basit Örnek

Mesela e-posta adresini şuraya kopyalayan bir düğme ekleyelim: kullanıcının panosuna yapıştırın.

Tıklandığında kopyalama işlemini başlatmak için e-posta adresini 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'te, düğmemize bir tıklama etkinliği işleyici eklemek Bu örnekte, js-emaillink bağlayıcısından e-posta adresi metnini seçip bir kopya yürütüyoruz. komutuna ekleyerek, e-posta adresinin kullanıcının panosunda görünmesini sağlar ve kullanıcının seçimin gerçekleşmediğini görmemesi için e-posta adresinin seçimini kaldırın.

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, Selection API'nin bir yöntemini kullanıyoruz. window.getSelection() programlı bir şekilde ayarlamak için bağlantıyı ekleyin. Bu bağlantı, kullanıcının panosuna kopyalamak istiyorsunuz. document.execCommand() çağrısını yaptıktan sonra, şunu arayarak seçimi kaldırabilirsiniz: window.getSelection().removeAllRanges() işlevini kullanmanız gerekir. Her şeyin beklendiği gibi çalıştığından emin olmak istiyorsanız document.execCommand(); yanıtı komut şöyle değilse false (yanlış) değerini döndürür: etkinleştirebilirsiniz. execCommand() öğesini "kesintiden" itibaren bir dene ve yakala ve "kopyala" komutları hata verebilir tercih edebilirsiniz.

'Kesit' komutu metni kaldırmak istediğiniz metin alanları için kullanılabilir panodan erişilebilir hale getirin.

HTML'mizde bir metin alanı ve bir 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() çağrısına başlamadan önce, bu API'nin document.queryCommandSupported() yöntemidir. Yukarıdaki örneğimizde, düğmenin devre dışı durumunu şu şekilde ayarlayabiliriz: şu şekilde destekleyebilirsiniz:

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

Artımlılık ile ilişkilendirme document.queryCommandSupported() ve document.queryCommandEnabled() kesme ve kopyalamanın bir tarayıcı tarafından desteklenebilmesi, ancak şu anda metin seçili değilse bu özelliklerin etkinleştirilmemesidir. Bu sayede, önemli noktalarda metin seçimini programlı bir şekilde yapıyor ve komutun veya kullanıcıya bir mesaj sunar.

Tarayıcı Desteği

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

Safari bu komutları desteklemiyor.

Bilinen Hatalar