IE10 e versioni successive hanno aggiunto il supporto per i comandi "cut" e "copy" 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. Ciò consente di 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 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 al pulsante un gestore di eventi clic che consente di selezionare il testo dell'indirizzo email dall'ancoraggio js-emaillink, eseguire un comando di copia in modo che l'indirizzo email sia presente negli appunti dell'utente e quindi deselezionare l'indirizzo email in modo che l'utente non veda che la selezione avvenga.
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 programmaticamente 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(). Per confermare che tutto ha funzionato come previsto, puoi esaminare la risposta di document.execCommand() che 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.
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 il metodo document.queryCommandSupported(). Nell'esempio precedente, potremmo impostare lo stato disattivato del pulsante in base a un supporto simile a questo:
copyEmailBtn.disabled = !document.queryCommandSupported('copy');
La differenza tra document.queryCommandSupported() e document.queryCommandEnabled() è che taglia e copia potrebbero essere supportate da un browser, ma se al momento non è selezionato alcun testo, queste funzionalità non verranno attivate. Ciò è utile negli scenari in cui non imposti la selezione del testo in modo programmatico e vuoi assicurarti che il comando funzioni come previsto, altrimenti presentare un messaggio all'utente.
Supporto dei browser
IE 10+, Chrome 43+, Firefox 41+ e Opera 29+ supportano questi comandi.
Safari non supporta questi comandi.