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实现鼠标滑过遮罩并高亮显示效果
Jul 16 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
javascript继承机制实例详解
Nov 20 Javascript
用React实现一个完整的TodoList的示例代码
Oct 30 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
Aug 19 Javascript
详解ES6 系列之异步处理实战
Oct 26 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
微信小程序加载机制及运行机制图解
Nov 27 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
模拟OICQ的实现思路和核心程序(二)
2006/10/09 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
js 获取radio按钮值的实例
2013/08/17 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
BootStrap的JS插件之轮播效果案例详解
2016/05/16 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
python实现Windows电脑定时关机
2018/06/20 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
python截取两个单词之间的内容方法
2018/12/25 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
Python matplotlib画图与中文设置操作实例分析
2019/04/23 Python
Python+Appium实现自动化测试的使用步骤
2020/03/24 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
医学类个人求职信范文
2014/02/05 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
交通事故私了协议书
2014/04/16 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
学校食堂食品安全责任书
2014/07/28 职场文书
聘任证明怎么写
2015/03/02 职场文书
普通员工辞职信范文
2015/05/12 职场文书
信息技术课教学反思
2016/02/23 职场文书
python图像处理基本操作总结(PIL库、Matplotlib及Numpy)
2021/06/08 Python
MySQL实现配置主从复制项目实践
2022/03/31 MySQL
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电