In IE10 e versioni successive è stato aggiunto il supporto per i comandi "Taglia" e "Copia" tramite il metodo 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à tagliato o copiato negli appunti dell'utente. In questo modo puoi offrire all'utente un modo semplice per selezionare una parte di testo e copiarla negli appunti.
Questa funzionalità diventa estremamente utile se la combini con l'API Selection per selezionare il testo in modo programmatico e determinare cosa viene copiato nella clipboard, che esamineremo più dettagliatamente più avanti in questo articolo.
Esempio semplice
Ad esempio, aggiungiamo un pulsante che copia un indirizzo email negli appunti dell'utente.
Aggiungiamo l'indirizzo email nel codice HTML con un pulsante per avviare la copia quando viene fatto clic:
<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, in JavaScript, vogliamo aggiungere un gestore dell'evento di clic al pulsante in cui selezioniamo il testo dell'indirizzo email dall'ancora js-emaillink, eseguiamo un comando di copia in modo che l'indirizzo email sia nella clipboard dell'utente e poi deselezioniamo l'indirizzo email in modo che l'utente non veda la 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 utilizziamo un metodo dell'API Selection, window.getSelection() per impostare in modo programmatico la "selezione" del testo sull'ancora, ovvero il testo che vogliamo copiare negli appunti dell'utente. Dopo aver chiamato document.execCommand(), possiamo rimuovere la selezione chiamando window.getSelection().removeAllRanges(). Se vuoi verificare che tutto funzioni come previsto, puoi esaminare la risposta di document.execCommand(); restituisce false se il comando non è supportato o abilitato. Abbiamo racchiuso execCommand() in un blocco try/catch poiché i comandi "taglia" e "copia" possono generare un errore in alcuni scenari.
Il comando "taglia" può essere utilizzato per i campi di testo in cui vuoi rimuovere i contenuti di testo e renderli accessibili tramite la clipboard.
Utilizzando 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:
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 il metodo document.queryCommandSupported(). Nell'esempio precedente, potremmo impostare lo stato di disattivazione del pulsante in base al supporto come segue:
copyEmailBtn.disabled = !document.queryCommandSupported('copy');
La differenza tra document.queryCommandSupported() e document.queryCommandEnabled() è che Taglia e Copia potrebbero essere supportati da un browser, ma se al momento non è selezionato alcun testo, non verranno attivati. Questa opzione è utile in scenari in cui non imposta la selezione di testo in modo programmatico e vuoi assicurarti che il comando funzioni come previsto, altrimenti presenta un messaggio all'utente.
Supporto dei browser
Questi comandi sono supportati da IE 10 e versioni successive, Chrome 43 e versioni successive, Firefox 41 e versioni successive e Opera 29 e versioni successive.
Safari non supporta questi comandi.