javaScript复制功能调用实现方案

代码如下:

验证码:<input type="text" id="code"/> <input type="button" value="复制" onclick="fuzhi()">
<script type="text/javascript">
function fuzhi(){
var codeVal=jQuery("#code").val();
alert(codeVal);
if (navigator.userAgent.toLowerCase().indexOf('ie') > -1) { //IE浏览器
clipboardData.setData('Text', codeVal);
alert("已经复制到剪切板");
} else {
prompt("请复制:", codeVal);
}
// window.clipboardData.setData("Text",jQuery("#code").val());
}
</script>

最近都没有什心情去写博文，主要因为心烦的事情渐渐多起来了。
哎！离题了，回到这篇文章了。说到使用js实现点击复制的功能，我下面想说的方法也是和网上的大同小异的。js实现是很简单，最难的是兼容问题，毕竟用IE以外的人还是有很多的。这里，我也是根据网上的相关资源总结一下方法。

方法一，逐一判别处理法
方法很简单也很容易懂，就是通过判断客户端浏览器类别，来执行不同的js代码来实现复制功能。虽然从理论上来说，这样是行得通得。但是，事实并没有我们想得那么容易。因为我们并不太清楚一些浏览器下js复制代码的写法，至少我所知道的也就是IE和FF。

如果只是兼容IE和FF的话，那么简单得多了。这里我使用一个网上比较有名的判断IE核的方法，13字节法，这个也是我常用的。


代码如下:

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

这里我写个大概的实现复制的构架，具体代码我不粘上来的，网上可以很简单就找到，给大家参考


代码如下:

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;
}
}

根据需要可以自行添加不同的判断浏览器代码，实现该浏览器下的复制功能。一般情况下，根据IE > FF > opera/chrome>其他，这样的顺序进行判断。

方法二，flash间接处理法
原理很简单，通过创建一个flash，将复制的内容以变量的方式传递给flash，flash再将内容复制到内存中，这样就实现了复制的功能。只要支持flash，按理上是可以兼容绝大部分的浏览器的,这个方法是我今天看到的，也测试验证了。

安装及使用方法，可以在上面两个网址上找到，E文版，中文版只有通过搜索去找咯！
这里我提供一下实现框架的简单版，这里有用到上面的实现方式。这里有修改的，根据官方版说明方法，在单页面很容易就能实现该功能，但是在实际应用到某些CMS中，可能会遇到一些问题。什么问题呢？IE核页面会弹出 “该页面已终止”。原因很简单，就是js加载未完成就调用。竟然是IE的问题，那么我们就可以使用判断IE的方法，将IE独立出来，其他核就使用flash方法实现。


代码如下:

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');
}
}

这里用于判断是否为IE核，IE核将不使用flash处理法，直接使用复制机制


代码如下:

//复制处理
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;
}

以上为第二种方法的最简单设置方法，将代码放到<head></head>之间即可不管是第一种，还是第二种方法都要在需要复制的页面上添加下面两行代码
设置复制内容的文本域


代码如下:

<input type="text" id="textinfo"
onmouseout="checkClient('textinfo')" value="复制的内容" size="65"/>

设置触发对象按钮


代码如下:

<div id="d_clip_button" onclick="copyCode('textinfo')">复制地址</div>

这是第二种方法才要添加的，设置检测浏览器


代码如下:

<script>checkClient('textinfo');</script>

写到这里，大概的步骤就是这样了，其中还有些id的名称可以按需要修改。至少完整代码，可以参考官方的demo。
累了。

赞 (0)

相关推荐

  • JS实现复制功能

    JS实现复制功能

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS复制功能</title> <link href="" rel=" rel="external nofollow" stylesheet"> <style> *{ margin:0; pad

  • extjs表格文本启用选择复制功能具体实现

    extjs提供了方便的表格组件grid供使用,但是默认情况下表格中的文本是不能被选中的,自然也是无法复制的. 而选择复制文本的需要也是很平常的,于是我们就需要自己动手来解决这个问题,实现extjs的grid文本选择复制功能. 说明一点,文中所列出的代码片断都是在当前ext 4.0.2a版本下的,其它版本未做测试,请自行斟酌. 首先自定义一下样式,来覆盖默认的css样式: 复制代码 代码如下: <style type="text/css"> .x-selectable, .x

  • js禁止页面复制功能禁用页面右键菜单示例代码

    <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码 代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在

  • JavaScript实现复制功能各浏览器支持情况实测

    这两天在做Web前端时,遇到需求通过js实现文本复制的功能. 先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况: 1.IE浏览器,解决方法有三种,代码如下: 复制代码 代码如下: function copy(txtid){ var txtObj = document.getElementById(txtid); if(window.clipboardData){ // 仅IE支持此对象,firefox.chrome不支持 //1.通过clipboardData对象实现复制 //windo

  • JavaScript 实现完美兼容多浏览器的复制功能代码

    分享一段利用 JavaScript 实现复制功能的代码,兼容多浏览器,兼容IE和火狐浏览器. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JavaScript 复制功能代码,兼容多浏览器&l

  • Zero Clipboard js+swf实现的复制功能使用方法

    开发中经常会用到复制的功能,在 IE 下实现比较简单.但要想做到跨浏览器比较困难了.本文将介绍一个跨浏览器的库类 Zero Clipboard .它利用 Flash 进行复制,所以只要浏览器装有 Flash 就可以运行,而且比 IE 的 document.execCommand("Copy") 更加灵活. Zero Clipboard 的实现原理 Zero Clipboard 利用 Flash 进行复制,之前有 Clipboard Copy 解决方案,其利用的是一个隐藏的 Flash.

  • JavaScript 复制功能代码 兼容多浏览器

    因此兼容性没得说了,现在用不上的话,先收藏一下吧. JavaScript 复制功能代码,兼容多浏览器 //ie copyValue=function(strValue) { if(isIE()) { clipboardData.setData("Text",strValue); alert("您已成功复制了此地址"); } else { copy(strValue); alert("内容已被复制!"); } } function isIE(num

  • js 复制功能 支持 for IE/FireFox/mozilla/ns

    FF,不支持复制功能,要支持的话,很难的 js 复制功能 支持 for IE/FireFox/mozilla/ns 代码如下: 这里有两各上方式 : // js 复制功能 支持 for IE/FireFox/mozilla/ns function copy_clip(meintext) { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netsc

  • javaScript复制功能调用实现方案

    复制代码 代码如下: 验证码:<input type="text" id="code"/> <input type="button" value="复制" onclick="fuzhi()"> <script type="text/javascript"> function fuzhi(){ var codeVal=jQuery("#code

  • JavaScript 中断请求几种方案详解

    目录 1 Promise 中断调用链 中断Promise 包装abort方法--仿照Axios的CancelToken 2 RXJS的unsubscribe方法 3 Axios的CancelToken 1 Promise Promise有一个缺点是一旦创建无法取消,所以本质上Promise是无法被终止的. 但是我们可以通过中断调用链或中断Promise来模拟请求的中断. 中断调用链 中断调用链就是在某一个then/catch执行之后,后续的链式调用(包括then,catch,finally)不再

  • JavaScript 异步调用

    问题 可修改下面的 aa() 函数,目的是在一抄后用 console.log() 输出 want-value function aa() { setTimeout(function() { return "want-value"; }, 1000); } 但是,有额外要求: aa() 函数可以随意修改,但是不能有 console.log() 执行 console.log() 语句里不能有 setTimeout 包裹 解答 也许这是个面试题,管它呢.问题的主要目的是考察对异步调用执行结果

  • JavaScript 异步调用框架 (Part 3 - 代码实现)

    类结构 首先我们来搭一个架子,把需要用到的似有变量都列出来.我们需要一个数组,来保存回调函数列表:需要一个标志位,来表示异步操作是否已完成:还可以学IAsyncResult,加一个state,允许异步操作的实现者对外暴露自定义的执行状态:最后加一个变量保存异步操作结果. 复制代码 代码如下: Async = { Operation: { var callbackQueue = []; this.result = undefined; this.state = "waiting"; th

  • JavaScript 中调用 Kotlin 方法实例详解

    JavaScript 中调用 Kotlin 方法实例详解 Kotlin 编译器生成正常的 JavaScript 类,可以在 JavaScript 代码中自由地使用的函数和属性 .不过,你应该记住一些微妙的事情. 用独立的 JavaScript 隔离声明 为了防止损坏全局对象,Kotlin 创建一个包含当前模块中所有 Kotlin 声明的对象 .所以如果你把模块命名为 myModule,那么所有的声明都可以通过 myModule 对象在 JavaScript 中可用.例如: fun foo() =

  • 使用C# 的webBrowser写模拟器时的javascript脚本调用问题

    感觉很久不写模拟器代码了,昨天调试的时候碰了点壁,记录下来,避免大家再跟我犯同样的错误. 加入Javascript脚本的地方: HtmlElement jsElement = webBrowser1.Document.CreateElement("script"); jsElement.SetAttribute("type", "text/javascript"); jsElement.SetAttribute("text",

  • Android和JavaScript相互调用的方法

    Android和JavaScript相互调用的方法

    本文实例讲述了Android和JavaScript相互调用的方法.分享给大家供大家参考,具体如下: Html页面和Java代码结合的方式一般用在界面经常被更改 的情况下,可以讲html放在网络中,软件一打开就会访问网络获取到最新的界面.缺点是会受到网络信号的影响,从而导致访问速度慢. 1.用WebView来显示HTML代码 2.允许WebView执行JavaScript 复制代码 代码如下: webView.getSettings().setJavaScriptEnabled(true); 3.

  • JavaScript直接调用函数与call调用的区别实例分析

    本文实例讲述了JavaScript直接调用函数与call调用的区别.分享给大家供大家参考,具体如下: 直接调用 直接调用函数是最常见 最普通的方式,直接以函数附加的对象作为调用者, 在函数后括号内传入参数来调用函数 例如: window.alert("测试代码"); 其中调用者如果是window可以省略, 即直接alert("测试代码"); 以call() 方法调用函数 语法:call([thisObject[,arg1 [,arg2 [,...,argn]]]])

  • Javascript 直接调用服务器C#代码 ASP.NET Ajax实例

    Javascript 直接调用服务器C#代码 ASP.NET Ajax实例

    在MS Ajax中,JS与C#交互的一种方式就是调用WebService,该WebService可以ASMX的也可以是WCF的,不论哪种方式,系统都会自动为开发者生成代理的JS类.实现方法如下: 1.        建立一个网站,并在其中添加一个WCF服务(这里一定要选择Ajax-Enabled WCF Service),如下图所示: 2.        IDE会自动为我们生成一个SVC文件,是对外的接口,以及该SVC对应的后台实现类,该类文件会被放在App_Code下,如下图所示: 3.修改该

随机推荐