Home > Article > Web Front-end > Js Flash implements access to clipboard operation_javascript skills

Js Flash implements access to clipboard operation_javascript skills

WBOYOriginal: 2016-05-16 17:48:071155browse

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:

Copy code The code is as follows:

1. Now place a hidden flash container in the Body Absolute positioning

Copy code The code is as follows:

 
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

Copy the code The code is as follows:

 
onmouseover="LocalUrlManage.SetClipValue(this,'#copyUrlValue<%#Eval("Id")%>')" >Click to copy 

Copy code The code is as follows:

 
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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Simple js code to implement click-arrow image switching_Image special effectsNext article：Simple js code to implement click-arrow image switching_Image special effects

See more

Js Flash implements access to clipboard operation_javascript skills

Related articles