Home > Web Front-end > JS Tutorial > Summary of several examples of calling methods of javaScript copy function

Summary of several examples of calling methods of javaScript copy function

伊谢尔伦
Release: 2017-07-22 15:28:53
Original
1711 people have browsed it

Method 1, one-by-one identification and processing method

The method is very simple and easy to understand. It is to execute different js codes to realize the copy function by judging the client browser type. Although in theory, this works. However, it is not as easy as we think. Because we don’t know much about how to write js copy code in some browsers, at least what I know is IE and FF.

It would be much simpler if it was only compatible with IE and FF. Here I use a relatively well-known method on the Internet to determine the IE core, the 13-byte method, which I also commonly use.

if("\v"=="v") {//13个字节 
//这里是IE核,执行的代码,亲测兼容IE8 
}else{ 
//非IE核执行代码 
}
Copy after login

Here is a rough structure for realizing copying

function clipBoard(object){ 
//获取object的值,即复制内容 
var copyTxt=document.getElementById(object).value; 
//调用copy2Clipboar来实现浏览器,判断及执行代码 
if(copy2Clipboard(copyTxt)!= false){ 
alert('复制成功'); 
} 
} 
copy2Clipboard = function(txt){ 
if("\v"=="v"){ 
//IE浏览器执行代码 
window.clipboardData.clearData(); 
window.clipboardData.setData("Text",txt); 
return true; 
}else if(navigator.userAgent.indexOf("Firefox")>0){ 
//Firefox浏览器 
return true; 
}else if(window.google && window.chrome){ 
//chrome浏览器 
return true; 
}else{ 
alert("浏览器不支持"); 
return false; 
} 
}
Copy after login

You can add different judgment browser codes as needed to realize the copying function under the browser. Under normal circumstances, the judgment is based on the order of IE > FF > opera/chrome > others.

Method 2, flash indirect processing method
The principle is very simple. By creating a flash, the copied content is passed to the flash in the form of variables, and the flash then copies the content into the memory. This is achieved. Copy function. As long as it supports flash, it is theoretically compatible with most browsers. This method is what I saw today and has been tested and verified.

Installation and usage instructions can be found on the two websites above. The E-text version and the Chinese version can only be found through search!
Here is a simple version of the implementation framework, where the above implementation method is used. There are modifications here. According to the official version of the instructions, this function can be easily implemented on a single page, but in actual application in some CMS, you may encounter some problems. What's the problem? The IE core page will pop up "This page has been terminated". The reason is very simple, it is called before js loading is completed. It turns out to be a problem with IE, then we can use the method of judging IE to isolate IE, and other cores can be implemented using the flash method.

function checkClient(object){//判断浏览器 
var copyTxt=document.getElementById(object).value; //获取复制的内容 
if("v"!="v"){ 
//这里根据官方文档设置 
//这里设置flash位置,绝对相对都可以 
ZeroClipboard.setMoviePath('ZeroClipboard.swf'); 
//创建一个复制对象 
var clip = new ZeroClipboard.Client(); 
//设置手形 
clip.setHandCursor(true); 
//设置复制的内容 
clip.setText(copyTxt); 
//设置触发对象 
>clip.glue('d_clip_button'); 
} 
}
Copy after login

This is used to determine whether it is an IE core. The IE core will not use flash processing and directly use the copy mechanism

//复制处理 
function clipBoard(object){ 
var copyTxt=document.getElementById(object).value; 
if(copy2Clipboard(copyTxt)!= false){ 
alert('复制成功'); 
} 
} 
copy2Clipboard = function(txt){ 
if("\v"=="v") { //判断是否是IE浏览器 
window.clipboardData.clearData(); 
window.clipboardData.setData("Text",txt); 
return true; 
} 
else{ //非IE核直接返回 
return true; 
}
Copy after login

The above is the simplest setting method for the second method. Place it between Whether it is the first or the second method, add the following two lines of code to the page that needs to be copied
Set the text of the copied content Domain

<input type="text" id="textinfo" 
onmouseout="checkClient(&#39;textinfo&#39;)" value="复制的内容" size="65"/>
Copy after login

Set trigger object button

<p id="d_clip_button" onclick="copyCode(&#39;textinfo&#39;)">复制地址</p>
Copy after login

This is the second method to add, set the detection browser

<script>checkClient(&#39;textinfo&#39;);</script>
Copy after login

The above is the detailed content of Summary of several examples of calling methods of javaScript copy function. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template