Comandi Taglia e copia

Matt Gaunt
X Home page

IE10 e versioni successive hanno aggiunto il supporto del "cut" e "copy" tramite i comandi Document.execCommand() . A partire dalla versione 43 di Chrome, questi comandi sono supportati anche in Chrome.

Qualsiasi testo selezionato nel browser quando viene eseguito uno di questi comandi verrà tagliata o copiata negli Appunti dell'utente. Questo consente di offrire all'utente un modo semplice per selezionare una porzione di testo e copiarla negli appunti.

Questo diventa estremamente utile quando la combini con l'API Selection per selezionare in modo programmatico il testo per determinare cosa viene copiato negli appunti, che esamineremo più in dettaglio più avanti in questo articolo.

Esempio semplice

Ad esempio, aggiungiamo un pulsante che copia un indirizzo email nella negli appunti dell'utente.

Aggiungiamo l'indirizzo email nel nostro codice HTML con un pulsante per avviare la copia quando viene selezionato:

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

Poi, nel nostro codice JavaScript, vogliamo aggiungere un gestore di eventi clic al nostro pulsante in cui selezioniamo il testo dell'indirizzo email dall'anchor js-emaillink, eseguiamo una copia in modo che l'indirizzo email sia presente negli appunti dell'utente e poi deselezionare l'indirizzo email in modo che l'utente non veda l'avvenuta selezione.

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

Qui stiamo usando un metodo dell'API Selection, window.getSelection() per impostare in modo programmatico il pulsante di testo all'ancoraggio, cioè il testo vuoi copiare negli appunti dell'utente. Dopo aver chiamato document.execCommand() può rimuovere la selezione chiamando window.getSelection().removeAllRanges(). Per verificare che tutto abbia funzionato come previsto, puoi esaminare le risposta di document.execCommand() restituisce false se il comando non è supportato o abilitato. Aggreghiamo execCommand() in un comando "try and catch" poiché "cut" e "copy" I comandi possono restituire un errore in alcuni scenari.

Il taglio può essere usato per i campi di testo in cui vuoi rimuovere il testo contenuti e rendili accessibili tramite gli appunti.

Tramite un'area di testo e un pulsante nel codice HTML:

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

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

Per tagliare i contenuti, possiamo procedere nel seguente modo:

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

Prima di chiamare document.execCommand(), devi assicurarti che questa API sia supportata utilizzando document.queryCommandSupported() . Nell'esempio precedente, potremmo impostare lo stato disattivato del pulsante in base assistenza in questo modo:

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

La differenza tra document.queryCommandSupported() e document.queryCommandEnabled() è che la funzionalità Taglia e copia potrebbe essere supportata da un browser, ma se non è attualmente selezionato alcun testo, non saranno attivate. Questa funzionalità è utile quando non hai l'impostazione della selezione del testo in modo programmatico e garantire che il comando funzionerà come previsto, altrimenti presenterà un messaggio all'utente.

Supporto dei browser

IE 10+, Chrome 43+, Firefox 41+ e Opera 29+ supportano questi comandi.

Safari non supporta questi comandi.

Bug noti