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实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
基于jquery库的tab新形式使用
Nov 16 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
layui中的switch开关实现方法
Sep 03 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
js实现随机点名程序
Sep 17 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
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中关于普通表单多文件上传的处理方法
2011/03/25 PHP
preg_match_all使用心得分享
2014/01/31 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
php提取身份证号码中的生日日期以及验证是否为成年人的函数
2015/09/29 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jQuery实现的Email中的收件人效果(按del键删除)
2011/03/20 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
jQuery实现html表格动态添加新行的方法
2015/05/28 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
vue2中使用less简易教程
2018/03/27 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
javascript实现倒计时提示框
2021/03/02 Javascript
python在linux系统下获取系统内存使用情况的方法
2015/05/11 Python
PyCharm设置SSH远程调试的方法
2018/07/17 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
详解Python中的type和object
2018/08/15 Python
Python最小二乘法矩阵
2019/01/02 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
机械制造专业个人的自我评价
2013/12/28 职场文书
父亲的菜园教学反思
2014/02/13 职场文书
大学生就业自荐书
2014/06/16 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书