Dans Internet Explorer 10 et versions ultérieures, la commande "cut" est désormais compatible. et "copier" via la commande Document.execCommand() . À partir de la version 43 de Chrome, ces commandes sont également compatibles avec Chrome.
Tout texte sélectionné dans le navigateur lors de l'exécution de l'une de ces commandes coupé ou copié dans le presse-papiers de l'utilisateur. Cela vous permet de proposer à l'utilisateur un moyen simple pour sélectionner une partie du texte et la copier dans le presse-papiers.
Elle s'avère extrêmement utile lorsque vous la combinez avec l'API Selection pour : sélectionnent automatiquement du texte pour déterminer ce qui est copié dans le presse-papiers, nous y reviendrons plus en détail plus loin dans cet article.
Exemple simple
Par exemple, ajoutons un bouton qui copie une adresse e-mail presse-papiers de l'utilisateur.
Nous ajoutons l'adresse e-mail dans notre code HTML avec un bouton pour lancer la copie lorsque l'utilisateur clique dessus:
<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>
Ensuite, dans notre JavaScript, nous voulons ajouter un gestionnaire d'événements de clic à notre bouton dans
(nous sélectionnons le texte de l'adresse e-mail à partir de l'ancre js-emaillink, nous exécutons une copie)
afin que l'adresse e-mail soit dans le presse-papiers de l'utilisateur, puis nous
désélectionnez l'adresse e-mail pour que l'utilisateur ne voie pas la sélection effectuée.
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();
});
Ici, nous utilisons une méthode de l'API Selection, window.getSelection() pour définir de manière programmatique "selection" de texte à l'ancre, c'est-à-dire le texte que nous copier dans le presse-papiers de l'utilisateur. Après avoir appelé document.execCommand(), vous pouvez supprimer la sélection en appelant window.getSelection().removeAllRanges(). Si vous souhaitez vérifier que tout a fonctionné comme prévu, vous pouvez consulter réponse de document.execCommand(). il renvoie "false" si la commande n'est pas compatibles ou activées. Nous encapsulons execCommand() dans une tentative et interceptons depuis le « cut » et "copier" commandes peuvent générer une erreur dans quelques scénarios.
La coupe peut être utilisée pour les champs de texte dans lesquels vous souhaitez supprimer le texte contenu et le rendre accessible via le presse-papiers.
Utiliser une zone de texte et un bouton dans notre code HTML:
<p><textarea class="js-cuttextarea">Hello I'm some text</textarea></p>
<p><button class="js-textareacutbtn" disable>Cut Textarea</button></p>
Pour couper le contenu, procédez comme suit:
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 et queryCommandEnabled
Avant d'appeler document.execCommand(), vous devez vous assurer que cette API est
compatibles avec
document.queryCommandSupported()
. Dans notre exemple ci-dessus, nous pourrions définir l'état du bouton désactivé en fonction de
l’assistance comme ceci:
copyEmailBtn.disabled = !document.queryCommandSupported('copy');
La différence entre document.queryCommandSupported() et document.queryCommandEnabled() est que couper et copier peut être pris en charge par un navigateur, mais si aucun texte n'est actuellement sélectionné, ils ne seront pas activés. Cela est utile dans les cas où vous n'êtes pas la sélection de texte de manière programmatique et que vous souhaitez vous assurer que la commande s'exécutera comme prévu, sinon présentera un message à l'utilisateur.
Navigateurs pris en charge
Ces commandes sont compatibles avec Internet Explorer 10 (ou version ultérieure), Chrome 43 (ou version ultérieure), Firefox 41 (ou version ultérieure) et Opera 29 (ou version ultérieure).
Safari ne prend pas en charge ces commandes.