No need to use Flash to copy text to clipboard _ jQuery

All you need to do is introduce the script, assign a "data-clipboard-target" attribute to the HTML tag, and then write a small JavaScript snippet. To demonstrate a currency conversion application, when a numeric value is entered in a text box, the exchange result is displayed in another text box. When you click the text box, it will trigger the event to copy it to the clipboard and then display a message. If you find a solution on the Internet about how to copy a specific piece of text to the clipboard, the most likely result is to use the Flash solution to do this, although Flash can solve this problem well, it is not a wise idea because the product will eventually disappear or at least the browser will not provide support, therefore, this solution has no future. Although jQuery or pure JavaScript can be used, or even completely written by myself, why do we need to reinvent the wheel when someone has already created a solution? Let's take a look at Clipboard. js.

Clipboard. javascript deletes the Flash component and elegantly solves this problem. All you need to do is introduce the script, assign a "data-clipboard-target" attribute to the HTML Tag and write a small JavaScript snippet. To demonstrate a currency conversion application, when a numeric value is entered in a text box, the exchange result is displayed in another text box. When you click the text box, it will trigger the event to copy it to the clipboard and then display a message.

The following is my implementation.

Suppose this is your text box. (I used the MVC framework to create my application)

 
  
   From
   
    
     $
     
@Html.EditorFor(model=>model.AmountFrom,new{htmlAttributes=new{@class="form-controlinput-largest",@step="0.01",@type="number"}})
     

     

     
      To
      
       
        $
        

        
        

        

        

       
      
     
    
   
  
 

Have you noticed that I have an amounrom and an AmountFrom. amounrom is an input AmountFrom and an output. When we click this button, the value is sent to the clipboard. This magic happens in the "data-clipboard-target" attribute.

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

Here is the HTML section you are concerned about. Now let's look at the JavaScript/jQuery section.

 
  《script》《script》varclipboard=newClipboard('#AmountTo');clipboard.on('success',function(e){$("#messageBox").text("AmountSuccessfullyCopied!").show().fadeOut(2000);e.clearSelection();});clipboard.on('error',function(e){$("#messageBox").text("ErrorCopyingAmount").show().fadeOut(2000);});$('#AmountFrom').click(function(){$("#AmountFrom").val("");});《script》
 

At this point, we will find that clipoard. js is introduced. If the Clipboard is instantiated successfully, some actions will be assigned to the event; otherwise, an error will be triggered, right? All of this works well. It is compatible with all the latest browsers. Except for IE, it will give the following message.

If you want to see the actual results, this is a JSFiddle example.

The next step is to capture the Clipboard data and then automatically paste it into a text box when you click it. At this point, it seems that the browser will block it because of a security risk, but I will try to find or even make a solution, therefore, you must continue to pay attention to it.