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 相关文章推荐
Javascript开发包大全整理
Dec 22 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
深入分析javascript中console命令
Aug 14 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
在vue中使用防抖函数组件操作
Jul 26 Javascript
详解JS数组方法
Nov 20 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
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP基础之运算符的使用方法
2013/04/28 PHP
PHP无限分类(树形类)的深入分析
2013/06/02 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
Laravel与CI框架中截取字符串函数
2016/05/08 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
使用js画图之圆、弧、扇形
2015/01/12 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
JavaScript动态设置div的样式的方法
2015/12/26 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
Python中使用第三方库xlrd来读取Excel示例
2015/04/05 Python
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
简单了解django orm中介模型
2019/07/30 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
Python Excel vlookup函数实现过程解析
2020/06/22 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
广州地球村科技数据库题目
2016/04/25 面试题
学校感恩节活动策划方案
2014/10/06 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
2016大学生入党积极分子心得体会
2016/01/06 职场文书
PHP解决高并发问题
2021/04/01 PHP
pytorch 中nn.Dropout的使用说明
2021/05/20 Python
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
redis复制有可能碰到的问题汇总
2022/04/03 Redis