js实现复制功能(多种方法集合)


Posted in Javascript onJanuary 06, 2018

1.实现点击按钮,复制文本框中的的内容

<script type="text/javascript">
function copyUrl2()
{
var Url2=document.getElementById("biao1");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />

2.复制专题地址和 url 地址,传给 QQ/MSN 上的好友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Js复制代码</title>
</head>
<body>
<p>
<input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址,传给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>

3.直接复制 url

<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
<script language="javascript">
function copyUrl()
{
var clipBoardContent=this.location.href;
window.clipboardData.setData("Text",clipBoardContent);
alert("复制成功!");
}
</script>

4.点击文本框时,复制文本框里面的内容

<input onclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
function oCopy(obj){
obj.select();
js=obj.createTextRange();
js.execCommand("Copy")
alert("复制成功!");
}
</script>

5.复制文本框或者隐藏域中的内容

<script language="javascript">
function CopyUrl(target){
target.value=myimg.value;
target.select(); 
js=myimg.createTextRange(); 
js.execCommand("Copy");
alert("复制成功!");
}
function AddImg(target){
target.value="[IMG]"+myimg.value+"[/ img]";
target.select();
js=target.createTextRange(); 
js.execCommand("Copy");
alert("复制成功!");
}
</script>

6.复制 span 标记中的内容

<script type="text/javascript">
</script>
<br />
<br />
<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);
alert("复制成功!");
}
</script>

7.浏览器兼容 copyToClipboard("拷贝内容")

function copyToClipboard(txt) {
      if (window.clipboardData) {
        window.clipboardData.clearData();
        clipboardData.setData("Text", txt);
        alert("复制成功!");

      } else if (navigator.userAgent.indexOf("Opera") != -1) {
        window.location = txt;
      } else if (window.netscape) {
        try {
          netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
        } catch (e) {
          alert("被浏览器拒绝!\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'");
        }
        var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
        if (!clip)
          return;
        var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
        if (!trans)
          return;
        trans.addDataFlavor("text/unicode");
        var str = new Object();
        var len = new Object();
        var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
        var copytext = txt;
        str.data = copytext;
        trans.setTransferData("text/unicode", str, copytext.length * 2);
        var clipid = Components.interfaces.nsIClipboard;
        if (!clip)
          return false;
        clip.setData(trans, null, clipid.kGlobalClipboard);
        alert("复制成功!");
      }
    }

js实现但击自动选中文本

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>自动选择文本框/编辑框中的文字</title>
<script type="text/javascript">
function Myselect_txt(){
 if (document.form1.title.focus){
  document.form1.title.select();}
}
function Myselect_txtarea(){
 if (document.form1.content.focus){
  document.form1.content.select();}
}
</script>
</head>
<body style="font-size:12px">
<table width="443" height="97" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#f9f9f9">
 <form name="form1">
  <tr bgcolor="#214994">
   <td height="25" colspan="2"><div align="center"><font color="#FFFFFF">新闻信息修改</font></div></td>
  </tr>
  <tr>
   <td width="80" height="28"><div align="right"><font color="#214994">新闻标题:</font></div></td>
   <td width="363"><input name="title" type="text" size="50" value="今日新闻头条" onClick="Myselect_txt()"></td>
  </tr>
  <tr>
   <td height="20"><div align="right"><font color="#214994">新闻内容:</font></div></td>
   <td rowspan="2"><textarea name="content" cols="50" rows="6" onClick="Myselect_txtarea()">今日,据相关方面报道,...</textarea></td>
  </tr>
  <tr>
   <td height="10"> </td>
  </tr>
  <tr>
   <td height="32" colspan="2">
    <div align="center">
     <input name="add" type="submit" id="add" value="添加">
 
     <input name="Submit" type="reset" value="重置">
   </div></td>
  </tr>
 </form>
</table>
</body>
</html>

当前最常用的最简洁还是这个,代码少,减少页面加载速度

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

到此介绍这么多了,希望大家多多关注,三水点靠木以前的文章。

Javascript 相关文章推荐
JQuery toggle使用分析
Nov 16 Javascript
JavaScript中valueOf函数与toString方法深入理解
Dec 02 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
bootstrap使用validate实现简单校验功能
Dec 02 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 #Javascript
JavaScript寄生组合式继承实例详解
Jan 06 #Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 #jQuery
JS实现非首屏图片延迟加载的示例
Jan 06 #Javascript
jQuery中库的引用方法
Jan 06 #jQuery
基于JavaScript中标识符的命名规则介绍
Jan 06 #Javascript
js生成word中图片处理方法
Jan 06 #Javascript
You might like
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
利用PHP和AJAX创建RSS聚合器的代码
2007/03/13 PHP
深入浅析php json 格式控制
2015/12/24 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
js的逻辑运算符 ||
2010/05/31 Javascript
JS实现多物体缓冲运动实例代码
2013/11/29 Javascript
javascript运动详解
2015/07/06 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
详解Webpack DLL用法以及功能
2017/07/11 Javascript
node.js实现的装饰者模式示例
2017/09/06 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
更强大的vue ssr实现预取数据的方式
2019/07/19 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
layui下拉列表select实现可输入查找的方法
2019/09/28 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python操作gmail实例
2015/01/14 Python
深入解析Python中的线程同步方法
2016/06/14 Python
Python实现的密码强度检测器示例
2017/08/23 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
PyCharm代码格式调整方法
2018/05/23 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
英国复古服装购物网站:Collectif
2019/10/30 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
.NET方向面试题
2014/11/20 面试题
励志广播稿300字(5篇)
2014/09/15 职场文书
白鹤梁导游词
2015/02/06 职场文书
对公司的意见和建议
2015/06/04 职场文书
初级职称评定工作总结
2015/08/13 职场文书
使用pandas模块实现数据的标准化操作
2021/05/14 Python
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL
如何利用React实现图片识别App
2022/02/18 Javascript