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 相关文章推荐
使用js获取地址栏中传递的值
Jul 02 Javascript
jquery自定义函数的多种方法
Jan 09 Javascript
javascript实现分栏显示小技巧附图
Oct 13 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
jquery手风琴特效插件
Feb 04 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
js简单获取表单中单选按钮值的方法
Aug 23 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
JS实现烟花爆炸效果
Mar 10 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中调用JAVA
2006/10/09 PHP
PHP文件操作实现代码分享
2011/09/01 PHP
浅析PKI加密解密 OpenSSL
2013/07/01 PHP
PHP不用递归遍历目录下所有文件的代码
2014/07/04 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
阻止JavaScript事件冒泡传递(cancelBubble 、stopPropagation)
2007/05/08 Javascript
理清apply(),call()的区别和关系
2011/08/14 Javascript
node.js中的path.join方法使用说明
2014/12/08 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
Python3标准库glob文件名模式匹配的问题
2020/03/13 Python
Python抖音快手代码舞(字符舞)的实现方法
2021/02/07 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
Moda Operandi官网:美国奢侈品电商,海淘秀场T台同款
2020/05/26 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
担保书范本
2015/01/20 职场文书
讲座通知范文
2015/04/23 职场文书
防震减灾主题班会
2015/08/14 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers