Copy text to clipboard using jQuery without Flash_jquery

If you look for a solution on how to copy a specific text to the clipboard on the Internet, the most likely result is to use Flash to do this. Although using Flash can solve this problem well, this Not a smart idea as this product will eventually disappear or at least be no longer supported by browsers so this solution has no future. It's possible to use jQuery or pure JavaScript, or even write it entirely yourself, but why reinvent the wheel when someone has already created a solution? Let’s take a look at Clipboard.js.

Clipboard.js removes the Flash component and solves this problem elegantly. All you need to do is introduce its script, assign a "data-clipboard-target" attribute to the HTML tag and write a short paragraph JavaScript snippet. To demonstrate a currency conversion application, when you enter a value in one text box, the conversion result is displayed in another text box. When the text box is clicked, an event is triggered to copy it to the clipboard and display a message.

The following is my implementation.

Suppose this is your text box. (I use MVC framework to create my 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>

Did you notice that I have an AmountTo and an AmountFrom. AmountTo is the input and AmountFrom is the output. When we click this, its value will be passed to the clipboard. The magic happens inside the property "data-clipboard-target".

We also add a message box to display the copy action message

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

This is the HTML part you care about. Now let’s go to the JavaScript/jQuery part

<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>

At this point, you will find that we have only introduced clipoard.js. If the Clipboard is instantiated successfully, some actions will be assigned to the event, otherwise it will trigger an error, right? This is all good and works with all the latest browsers except IE, which gives a message like the one below.

If you want to see it in action, here is a JSFiddle example.

The next step is to grab the clipboard data and automatically paste it into a text box when clicked. At this point, it seems that the browser will prevent it due to a security risk, but I will try to find or even make a solution , so everyone has to continue to pay attention.