No Flash use JQuery to copy text to clipboard _jquery

If you find a solution on the internet about how to copy a specific piece of text to the Clipboard, the most likely outcome is to use the flash scheme to do this, although using Flash can solve the problem well, but it's not a sensible idea. Because the product will eventually disappear or at least the browser no longer supports it, there is no future for this solution. Although you can use jquery or pure JavaScript, or even write your own, but when someone has created a solution, why repeat the invention of the wheel? Let's see clipboard.js together.

Clipboard.js removes the Flash component and solves the problem gracefully, all it takes is to introduce its script, assign a "Data-clipboard-target" attribute to the HTML tag, and write a little JavaScript fragment. To demonstrate the assumption that you have a currency conversion application, when you enter a value in one text box, the Exchange results are displayed in another text box, and when you click the text box, it triggers the event to copy it to the Clipboard and display a message.

Here is my implementation.

If this is your text box. (I use the 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>

Have you noticed that I have a amountto and a amountfrom,amountto is the input amountfrom is the output, and when we click this the value is passed to the clipboard. This magical thing happens in the attribute "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>

Here is the HTML section you care about. Now let's look at the Javascript/jquery section.

<scriptsrc= "~/scripts/clipboard.min.js" >
</script>
<script>varclipboard=newclipboard (' #AmountTo ');
Clipboard.on (' Success ', function (e) {$ ("#messageBox"). Text ("amountsuccessfullycopied!"). Show (). fadeout (e.clearselection); Clipboard.on (' Error ', function (e) {$ ("#messageBox"). Text ("Errorcopyingamount"). Show (). fadeout (2000);}); $ (' #AmountFrom '). Click (function () {$ ("#AmountFrom"). Val ("");});
</script>

At this point, we'll find that we just introduced clipoard.js, and if the instantiation Clipboard succeeds and then gives the event some action, it triggers an error, right? This is all very well, it can be compatible with all the latest browsers, except IE, it will give a message like the following.

This is a jsfiddle example if you want to look at the actual effect.

The next step is to grab the Clipboard data and then automatically paste it into a text box when clicked, so it seems that the browser will stop it because of a security risk, but I will try to find and even make a plan, so we have to continue to focus.