Recently, I needed to solve this problem by clicking the button to copy the link. Finally, I found the solution ZeroClipBoard, an open source js Flash that implements the clipboard operation
. However, after searching many examples, I found that most of them introduce only one fixed copy operation for a page
and My requirement is this
A dynamic Repeater dynamically loads each address and copy button.
The principle of this solution is:
Use js to dynamically load a transparent flash. Then cover it on the button you want to click, and then bind an event to the hosting element of the flash to dynamically transfer the value to be copied. Go to flash and use flash to access the clipboard.
A problem arises at this time. If you add multiple buttons to flash, it will consume a lot of memory and the dynamic code is not easy to write.
The final solution is as follows:
1. Now place a hidden flash container in the Body Absolute positioning
varLocalUrlManage={
Clip:null,
ClipContainer:null,
InitClip:function(){
LocalUrlManage.Clip=newZeroClipboard.Client();
LocalUrlManage.ClipContainer=$("#ClipSwf");
LocalUrlManage.Clip .setHandCursor(true);
LocalUrlManage.Clip.setCSSEffects(true);
LocalUrlManage.Clip.addEventListener("complete",function(client,text){
Tip.RightTip("#UrlAdd", text "," "Copy successfully!");
});
LocalUrlManage.ClipContainer.html(LocalUrlManage.Clip.getHTML(80,25));
}}
2. Use js to initialize the clipboard object when the page is loaded, set the mouse gestures and the hosting container, and then output the flash into html and output it to the container
onmouseover="LocalUrlManage.SetClipValue(this,'#copyUrlValue<%#Eval("Id")%>')" >Click to copy
SetClipValue:function(obj,SelectorEl){
//BrowserClip.IEClip($(SelectorEl).val());
varoffset=$(obj).offset();
LocalUrlManage. ClipContainer.offset({left:offset.left,top:offset.top});
LocalUrlManage.Clip.setText($(SelectorEl).val());
}.
3. Dynamically bind events to each copy button and pass the corresponding value or control to be copied to the function. Then set the left and top margins of the hidden flash container so that it floats on the button that triggers the event and put The value to be copied is passed to flash through
Clip.setText('text') (the method provided by the plug-in). This realizes the function of copying multiple buttons.
The problem has not been solved. The original hovercss switching effect of the button is covered by flash. It becomes less flexible after that. The effect of dynamically adding styles with jquery is not very good.