用 javascript 实现的点击复制代码

 更新时间:2007年03月24日 00:00:00   投稿:mdxy-dxy  
用 javascript 实现的点击复制代码,需要的朋友可以参考一下

最常用的代码,不需要多浏览器都兼容,但代码比较简洁,也不用很多的js与flash

function copyToClipboard(txt) {  
	if(window.clipboardData){  
		window.clipboardData.clearData();  
		window.clipboardData.setData("Text", txt);
		alert('复制成功!')
	}else{
		alert('请手动复制!')	
	}  
}

如果你需要这个兼容多浏览器的js复制代码功能可以参考这篇文章:

https://www.jb51.net/article/76769.htm

<title>标题</title>
<input type="button" name="Submit" onClick='copyToClipBoard()' value="复制专题地址,传给QQ/MSN上的好友">
 <script language="javascript">
   function copyToClipBoard(){
    var clipBoardContent="";
    clipBoardContent+=document.title;
    clipBoardContent+="";
    clipBoardContent+=this.location.href;
    window.clipboardData.setData("Text",clipBoardContent);
    alert("复制成功,请粘贴到你的QQ/MSN上推荐给你的好友");
  }
  </script>
 
<script> 
function oCopy(obj){ 
obj.select(); 
js=obj.createTextRange(); 
js.execCommand("Copy") 

</script>
<input onclick="oCopy(this)" value="要copy的内容!">
 
<script language="javascript"> 
function CopyUrl(target){ 
target.value=myimg.value; 
target.select();  
js=myimg.createTextRange();  
js.execCommand("Copy"); 

function AddImg(target){ 
target.value="[IMG]"+myimg.value+"[/ img]";  (注:[/ img]中/后面有空格请去掉 )
target.select(); 
js=target.createTextRange();  
js.execCommand("Copy"); 

</script> 
<input name=myimg type=hidden id=myimg value="https://www.jb51.net" /> 
<input name=imgurl type=text size=32 value="https://www.jb51.net" /> 
<input type=button value="点击这里复制本站地址" onclick="CopyUrl(imgurl);" /> 
<P>如果你喜欢本站,就推荐给你的朋友吧!</P>
 
<script type="text/javascript"> 
function copyText(obj)  

var rng = document.body.createTextRange(); 
rng.moveToElementText(obj); 
rng.scrollIntoView(); 
rng.select(); 
rng.execCommand("Copy"); 
rng.collapse(false);} 
</script> 
以下是代码片段:

复制代码 代码如下:

<span id="tbid">https://www.jb51.net</span>
[<a href="#" onclick="copyText(document.all.tbid)">点击复制</a>]<br/><br/>
<span id="tbid2">https://www.jb51.net</span>
[<a href="#" onclick="copyText(document.all.tbid2)">点击复制</a>]<br/><br/>

相关文章

  • Bootstrap3.0建站教程(一)之bootstrap表单元素排版

    Bootstrap3.0建站教程(一)之bootstrap表单元素排版

    本文给大家介绍Bootstrap3.0建站教程(一)之bootstrap表单元素排版,本文给大家列举了文字和输入框前后排列和上下排列的实例代码,有需要的朋友参考下吧
    2016-06-06
  • Javascript的无new构建实例详解

    Javascript的无new构建实例详解

    这篇文章主要介绍了Javascript的无new构建实例详解的相关资料,小编感觉介绍的非常详细,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-05-05
  • Typescript学习之接口interface举例详解

    Typescript学习之接口interface举例详解

    TypeScript是JavaScript的一个超集,主要提供了类型系统和对ES6+的支持,TypeScript的核心原则之一是对值所具有的结构进行类型检查,这篇文章主要给大家介绍了关于Typescript学习之接口interface的相关资料,需要的朋友可以参考下
    2024-03-03
  • JavaScript的Number对象的toString()方法

    JavaScript的Number对象的toString()方法

    toString()方法可以把Number对象转换成字符串,并返回此字符串,本文给大家介绍JavaScript的Number对象的toString()方法,对javascript对象方法相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • Websocket通信协议在数字孪生中的应用

    Websocket通信协议在数字孪生中的应用

    这篇文章主要为大家介绍了Websocket通信协议在数字孪生中的应用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • js基于面向对象实现网页TAB选项卡菜单效果代码

    js基于面向对象实现网页TAB选项卡菜单效果代码

    这篇文章主要介绍了js基于面向对象实现网页TAB选项卡菜单效果代码,实例演示了鼠标滑过即点击两种方式实现tab选项卡切换功能,涉及JavaScript鼠标事件控制页面元素属性变换的功能,需要的朋友可以参考下
    2015-09-09
  • JS按位非(~)运算符与~~运算符的理解分析

    JS按位非(~)运算符与~~运算符的理解分析

    按位非运算符,简单的理解就是改变运算数的符号并减去1,当然,这是只是简单的理解能转换成number类型的数据
    2011-07-07
  • javascript实现动态标签云

    javascript实现动态标签云

    JS标签云效果,在鼠标的作用下会自动转动,整体上围绕成一个圆形,各个标签之间无需Div代码,直接文字+链接的形式,有多少就显示多少,JavaScript会自动调整显示数量,让视觉效果最佳。
    2015-10-10
  • JS刷新框架外页面七种实现代码

    JS刷新框架外页面七种实现代码

    JS刷新框架想必大家们都有所了解,如何是刷新框架外页面想必大家有所陌生啦,没关系本文的出现将解决大家的燃眉之急,感兴趣的你可不要错过了哈
    2013-02-02
  • JavaScript数组常用的增删改查与其他属性详解

    JavaScript数组常用的增删改查与其他属性详解

    这篇文章主要给大家介绍了关于JavaScript数组常用的增删改查与其他属性的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10

最新评论