IE10 e versioni successive hanno aggiunto il supporto per i comandi "cut" e "copy" tramite il metodo Document.execCommand(). A partire dalla versione 43, 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 porzione di testo e copiarlo negli appunti.
Ciò diventa estremamente utile quando lo combini con l'API Selection per selezionare in modo programmatico il testo e determinare ciò che viene copiato negli appunti. Approfondiremo questo aspetto 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 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, nel nostro codice JavaScript, vogliamo aggiungere un gestore di eventi di clic al pulsante. In questo modo, selezioniamo il testo dell'indirizzo email dall'ancoraggio js-emaillink, eseguiamo un comando di copia in modo che l'indirizzo email sia presente negli appunti 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();
});
Quello che stiamo facendo qui è utilizzare un metodo dell'API Selection, window.getSelection(), per impostare in modo programmatico la "selezione" del testo sull'ancoraggio, 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 abbia funzionato come previsto, puoi esaminare la risposta di document.execCommand(), restituisce false se il comando non è supportato o abilitato. Aggregaamo execCommand() in un tentativo di cattura poiché i comandi "cut" e "copy" possono generare un errore in alcuni scenari.
Il comando "cut" può essere utilizzato per i campi di testo in cui vuoi rimuovere il contenuto testuale e renderlo accessibile tramite gli appunti.
Utilizzo di un'area di testo e di 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(). Nel nostro esempio precedente, potremmo impostare lo stato del pulsante disattivato in base
all'utilizzo seguente:
copyEmailBtn.disabled = !document.queryCommandSupported('copy');
La differenza tra document.queryCommandSupported() e document.queryCommandEnabled() è che il ritaglio e la copia potrebbero essere supportati da un browser, ma se al momento non è selezionato alcun testo, non verranno attivati. Questo è utile negli scenari in cui non imposti la selezione del testo in modo programmatico e vuoi assicurarti che il comando funzioni come previsto, altrimenti presente un messaggio all'utente.
Supporto dei browser
IE 10 e versioni successive, Chrome 43 e versioni successive, Firefox 41 e versioni successive e Opera 29 e versioni successive supportano questi comandi.
Safari non supporta questi comandi.