Web Front-end
JS Tutorial
ZeroClipboard plug-in implements multi-browser copy function (supports firefox, chrome, ie6)_javascript skills
ZeroClipboard plug-in implements multi-browser copy function (supports firefox, chrome, ie6)_javascript skills
However, it is worth noting that the official introduction has clearly stated that this plug-in does not support IE6. The following will provide the implementation of the multi-instantiation Zero Clipboard copy function and the writing method compatible with IE6!
Download ZeroClipboard first http://www.jb51.net/jiaoben/24961.html
<style type="text/css">
body { font-family:arial,sans-serif; font-size:9pt; }
.copyit {text-align:center; border:1px solid #FD6001; background-color:#ED730B; margin:10px; padding:2px 5px; cursor:pointer; font-size:12px; border-radius:3px;}
.copyit.hover { background-color:#FD6001;}.copyit.active { background-color:#d25102;}/*鼠标hover效果,实为调用setCSSEffects()方法*/
.copy_info{width:260px;height:100px;border:1px solid #ccc;padding:5px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/ZeroClipboard/ZeroClipboard.js"></script>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第1个被复制的内容！！！</textarea>
<b class="copyit">复制内容</b>
</div>
<br/>
<div class="clip_container">
<textarea id="fe_text" cols=50 rows=5 class="copycnt">第2个被复制的内容！！！</textarea>
<b class="copyit">复制内容</b>
</div>
<script type="text/javascript">
var clip = null;
function copyThis() {
if($.browser.version==6.0){
//针对ie6
$('.copyit').bind("click",function(){
var code=$(this).parents(".clip_container").find(".copycnt").text();
window.clipboardData.setData("Text",code);
alert('被复制的内容:\n'+code);
})
return;
}
ZeroClipboard.setMoviePath("http://img.jb51.net/js/scripts/clipboard.swf'");//如果ZeroClipboard.js, ZeroClipboard.swf放在同一目录下，可省略这句;
clip = new ZeroClipboard.Client();
$('.copyit').mouseover( function() {
var code=$(this).parents(".clip_container").find(".copycnt").text();
clip.setText(code);
if (clip.div) {//已创建过包含flash的父层div,则鼠标hover时重新定位flash层的位置
//clip.receiveEvent('mouseout', null);
clip.reposition(this);
}else{
clip.glue(this)};
//clip.receiveEvent('mouseover', null);
} );
clip.addEventListener( 'complete', function(client, text){
alert("被复制内容：\n"+text);
});
}
copyThis();
</script>
<textarea style="width:300px;height:300px;">
粘贴复制的内容到这里试试！！
</textarea>For the above implementation method, except that ie6 uses window.clipboardData.setData to implement the copy function, other browsers use the Zero Clipboard plug-in to implement the copy function!
Some points you should pay attention to when using this plug-in:
1. The above ZeroClipboard.js and ZeroClipboard.swf need to be placed in the same path. If it is not in the same path, you can use ZeroClipboard.setMoviePath(“Flash path”); to set the ZeroClipboard.swf address.
2. Analysis of the setCSSEffects() method: When the mouse moves over or clicks on the button, due to the obstruction of the Flash button, the css ":hover", ":active" and other pseudo-classes that copy the button itself may be Invalid. The setCSSEffects() method solves this problem. First we need to change the pseudo class into a class, such as:
.copyit:hover{
border-color:#FF6633;
}
// Need to change ":hover" to the following ".hover"
.copyit.hover{
border-color:#FF6633;
}
3. Analysis of the getHTML() method: If you want to instantiate Flash yourself without using the Zero Clipboard attachment method, then this method can help. It accepts two parameters, namely the width and height of Flash. What is returned is the HTML code corresponding to Flash. For example:
var html = clip.getHTML( 150, 20 );
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to copy lyrics from QQ Music How to copy lyrics
Mar 12, 2024 pm 08:22 PM
We users should be able to understand the diversity of some functions when using this platform. We know that the lyrics of some songs are very well written. Sometimes we even listen to it several times and feel that the meaning is very profound. So if we want to understand the meaning of it, we want to copy it directly and use it as copywriting. However, if we want to use it, we still need to You just need to learn how to copy lyrics. I believe that everyone is familiar with these operations, but it is indeed a bit difficult to operate on a mobile phone. So in order to give you a better understanding, today the editor is here to help you. A good explanation of some of the above operating experiences. If you also like it, come and take a look with the editor. Don’t miss it.
What is the shortcut key for copying?
Mar 10, 2023 pm 02:00 PM
The shortcut key for copying is "Ctrl+c", and the corresponding paste key is "Ctrl+v"; on the computer, use the mouse to drag and select text, hold down Ctrl, and then click the C key to complete the copy; A shortcut key refers to completing an operation through certain specific keys, key sequences, or key combinations.
PS copy layer shortcut key
Feb 23, 2024 pm 02:34 PM
In the PS copy layer shortcut keys, we can know that if you want to copy a layer when using PS, you can use the shortcut key [Ctrl+J] for quick copying. This introduction to the shortcut keys for copying layers can tell you the specific operation method. The following is the detailed content, so take a look. PS copy layer shortcut key answer: [Ctrl+J] Specific method: 1. Open the image in PS and select the layer that needs to be copied. 2. Press [Ctrl+J] on the keyboard at the same time to complete the copy of the layer. Other copying methods: 1. After opening the image, press and hold the layer and move the [New Layer] icon downwards. 2. After moving to the icon, let go. 3. The layer copy is completed.
How to copy and move drag-and-drop elements in Vue?
Jun 25, 2023 am 08:35 AM
Vue is a popular JavaScript framework that provides a convenient drag-and-drop function, allowing us to easily copy and move elements. Next, let's take a look at how to copy and move drag-and-drop elements in Vue. 1. Basic implementation of drag-and-drop elements To copy and move drag-and-drop elements in Vue, you first need to implement the basic drag-and-drop function of the element. The specific implementation method is as follows: Add the elements that need to be dragged in the template: <divclass="drag-elem"
How to back up CMS DreamWeaver database files?
Mar 13, 2024 pm 06:09 PM
How to back up CMS DreamWeaver database files? In the process of using CMS to build a website, it is very important to ensure the security of database files to prevent data loss or damage. Backing up database files is an essential operation. The following will introduce how to back up CMS DreamWeaver database files and attach specific code examples. 1. Use phpMyAdmin for backup. phpMyAdmin is a commonly used database management tool through which you can easily back up the database. The following is using phpMyAdm
What should I add to the copy shortcut key ctrl?
Mar 15, 2024 am 09:57 AM
On Windows, the shortcut key for copying is Ctrl C; on Apple, the shortcut key for copying is Command C; on Linux, the shortcut key for copying is Ctrl Shift C. Knowing these shortcut keys can improve the user's work efficiency and facilitate text or file copy operations.
How to copy a table in Excel and keep the original format?
Mar 21, 2024 am 10:26 AM
We often use Excel to process multiple table data. After copying and pasting the set table, the original format returns to the default, and we have to reset it. In fact, there is a way to make the Excel copy table retain the original format. The editor will explain the specific method to you below. 1. Ctrl key dragging and copying operation steps: Use the shortcut key [Ctrl+A] to select all table contents, then move the mouse cursor to the edge of the table until the moving cursor appears. Press and hold the [Ctrl] key, and then drag the table to the desired position to complete the movement. It should be noted that this method only works on a single worksheet and cannot be moved between different worksheets. 2. Steps for selective pasting: Press the [Ctrl+A] shortcut key to select all tables, and press
Learn to use copy-paste shortcuts
Jan 13, 2024 pm 12:27 PM
When many users use computers, if they encounter something that needs to be copied and pasted, it is very troublesome to copy with the mouse. So how to use the shortcut keys for copy and paste? Come and take a look at the detailed tutorial ~ Copy and paste shortcuts How to use the key: 1. Copy key: Ctrl+C, select the text or image to be copied, and press the shortcut key. 2. Paste key: Ctrl+V. Just press the shortcut key directly where you want to paste.
