Copiez le texte dans le presse-papiers en utilisant jQuery sans Flash_jquery

Si vous cherchez une solution pour copier un texte spécifique dans le presse-papiers sur Internet, le résultat le plus probable est d'utiliser Flash pour ce faire. Bien que l'utilisation de Flash puisse bien résoudre ce problème, ce n'est pas une bonne idée car. ce produit finira par disparaître ou du moins ne sera plus supporté par les navigateurs donc cette solution n'a pas d'avenir. Il est possible d'utiliser jQuery ou du JavaScript pur, ou même de l'écrire entièrement vous-même, mais pourquoi réinventer la roue quand quelqu'un a déjà créé une solution ? Jetons un coup d'œil à Clipboard.js.

Clipboard.js supprime le composant Flash et résout ce problème avec élégance. Tout ce que vous avez à faire est d'introduire son script, d'attribuer un attribut "data-clipboard-target" à la balise HTML et d'écrire un court. Extrait JavaScript du paragraphe. Pour illustrer une application de conversion de devises, lorsque vous entrez une valeur dans une zone de texte, le résultat de la conversion est affiché dans une autre zone de texte. Lorsque vous cliquez sur la zone de texte, un événement est déclenché pour la copier dans le presse-papiers et afficher un message.

Ce qui suit est ma mise en œuvre.

Supposons qu'il s'agisse de votre zone de texte. (J'utilise le framework MVC pour créer mon application)

<divclass="row"><divclass="col-md-6">From<divclass="input-group">
<divclass="input-group-addon">$</div>
@Html.EditorFor(model=>model.AmountFrom,new{htmlAttributes=new{@class="form-controlinput-largest",@step="0.01",@type="number"}})
</div></div><divclass="col-md-6">To<divclass="input-group"><divclass="input-group-addon">$
</div><inputtype="text"id="AmountTo"value="@Model.AmountTo"class="form-controlinput-largest"readonlydata-clipboard-action="copy"data-clipboard-target="#AmountTo"/>
</div>
</div>
</div>

Avez-vous remarqué que j'ai un AmountTo et un AmountFrom. AmountTo est l'entrée et AmountFrom est la sortie. Lorsque nous cliquons dessus, sa valeur sera transmise au presse-papiers. La magie opère à l'intérieur de la propriété "data-clipboard-target".

Nous ajoutons également une boîte de message pour afficher le message d'action de copie

<divclass="row">
<divclass="col-md-6"><br/>
<spanid="messageBox"class="text-success"style="display:block;text-align:center"></span></div></div>

C'est la partie HTML qui vous intéresse. Passons maintenant à la partie JavaScript/jQuery

<scriptsrc="~/Scripts/clipboard.min.js">
</script>
<script>varclipboard=newClipboard(&apos;#AmountTo&apos;);
clipboard.on(&apos;success&apos;,function(e){$("#messageBox").text("AmountSuccessfullyCopied!").show().fadeOut(2000);e.clearSelection();});clipboard.on(&apos;error&apos;,function(e){$("#messageBox").text("ErrorCopyingAmount").show().fadeOut(2000);});$(&apos;#AmountFrom&apos;).click(function(){$("#AmountFrom").val("");});
</script>

À ce stade, vous constaterez que nous n'avons introduit que clipoard.js. Si le Presse-papiers est instancié avec succès, certaines actions seront affectées à l'événement, sinon cela déclenchera une erreur, n'est-ce pas ? Tout va bien et fonctionne avec tous les derniers navigateurs sauf IE, qui donne un message comme celui ci-dessous.

Si vous voulez le voir en action, voici un exemple JSFiddle.

L'étape suivante consiste à récupérer les données du presse-papiers et à les coller automatiquement dans une zone de texte lorsque vous cliquez dessus. À ce stade, il semble que le navigateur l'empêchera en raison d'un risque de sécurité, mais je vais essayer de trouver ou même de créer. une solution, donc tout le monde doit continuer à y prêter attention.