Jq将字符串复制粘贴到剪贴板

 
 
第一种：  自己测试时  只适合于input 和textarea 但是针对于其他标签的复制就不能用了。代码如下：
<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title></title>

        <meta charset="utf-8" />

    </head>

    <body>

        <input id="daima" value="11111">11111</input>

        <input type="button" id="Copy" value="点击复制代码" />

    </body>

</html>

<script src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    $("#Copy").click(function() {

        var copyText = $("#daima")；//获取对象

        copyText .select();//选择

        document.execCommand("Copy");//执行复制
 　　　　alert("复制成功！");
    })

</script>

上述代码如果为了美观需要写一部分代码进行处理输入框的样子；但是个人感觉要比第二种的代码要少一部分。



第二种：  适用所有的标签，进行把内容传递到创建的input对象当中，进行处理复制的操作，相比第一种要写不少js。测试代码如下：


<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title></title>

        <meta charset="utf-8" />

    </head>

    <body>

        <span id="daima">11111</span>

        <input type="button" id="Copy" value="点击复制代码" />

    </body>

</html>

<script src="js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    $("#Copy").click(function() {

        var ssrsss = $("#daima").text();//获取文本

        var flag = copyText(ssrsss); //传递文本

        alert(flag ? "复制成功！" : "复制失败！");

    })

    function copyText(text) {

        var textarea = document.createElement("input");//创建input对象

        var currentFocus = document.activeElement;//当前获得焦点的元素

        document.body.appendChild(textarea);//添加元素

        textarea.value = text;

        textarea.focus();

        if(textarea.setSelectionRange)

            textarea.setSelectionRange(0, textarea.value.length);//获取光标起始位置到结束位置

        else

            textarea.select();

        try {

            var flag = document.execCommand("copy");//执行复制

        } catch(eo) {

            var flag = false;

        }

        document.body.removeChild(textarea);//删除元素

        currentFocus.focus();

        return flag;

    }

</script>








												


											
jquery 复制的更多相关文章
	

    
						
  1. [Web 前端]   Jquery 复制元素，并修改属性, 追加到另一个元素后面
		
    cp from  : https://blog.csdn.net/cooledi/article/details/52813668 jquery 复制元素,并修改属性 $('#ID').clone() ...
    
		
    2. 
						
  2. C# js jquery复制textbox内容总结
		
    C# Language//复制: private void button1_Click(object sender, System.EventArgs e) {   if(textBox1.Selec ...
    
		
    3. 
						
  3. jquery 复制DIV与相关事件
		
    <div class="pages_img fix" name="fixpages">                <div class=& ...
    
		
    4. 
						
  4. jQuery 复制节点的元素实现加入到购物车功能
		
    描写叙述: 用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息 ...
    
		
    5. 
						
  5. jquery复制图片
		
    <div class="img-div">           <a href="javascript:void(0);"><im ...
    
		
    6. 
						
  6. jquery复制值到剪切板（clipboard.js）
		
    引入一个clipboard.js文件即可使用,下载地址:https://github.com/zenorocha/clipboard.js <script type="text/jav ...
    
		
    7. 
						
  7. 锋利的jQuery复制粘贴（一）
		
    两者区别:$(document).ready();网页中多有dom结构绘制完毕后就执行, 可能dom元素关联的东西没用加载完.[若有多个弹框,均可以执行输出] window.onload 必须等待多有 ...
    
		
    8. 
						
  8. jQuery 复制节点的元素实现添加到购物车功能
		
    描述: 用户点击左边div中的商品,对应商品会自动添加到右面的div中,类似电子商城中的添加到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将相应信息进行克隆 ...
    
		
    9. 
						
  9. JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）
		
    开源地址:https://github.com/yuezhongxin/paste-upload-image.js 支持 Ctrl+C/Ctrl+V 上传,支持拖拽上传,也支持 QQ/微信截图上传.  ...
    
		
    10. 
						
  10. JQuery复制内容到剪切板-jquery.zclip.js的使用，在公司项目中
		
    公司项目中有一个复制粘贴的内容,也试图找其他插件但都是浏览器兼容问题,在网上找这个插件挺不错的,FLASH,兼容各个浏览器,测试时要在服务器环境下,点击参考,参考这个网址,或者搜下标题这个插件,性能不 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. eclipse中创建了web项目，src下创建子目录是平级的情况
			
    1.在以下可设置不同的视图 windows->show view菜单 ->点Other......    然后在搜索框里输入你想要的视图 2.在Project Explorer下创建的包看 ...
    
			
    2. 
						
  2. Proxy SwitchyOmega 使用黑名单和白名单
			
    “黑名单”会告诉代理工具,黑名单(国外)里面的网站要使用代理:“白名单”会告诉代理工具,白名单(大陆网站)里面的网站直接连接,其余使用代理. 黑名单PAC 黑名单PAC两条(任选其一):https:/ ...
    
			
    3. 
						
  3. Virtual DOM（八）
			
    Virtual DOM 这个概念相信大部分人都不会陌生,它产生的前提是浏览器中的 DOM 是很“昂贵"的,为了更直观的感受,我们可以简单的把一个简单的 div 元素的属性都打印出来,如图所示 ...
    
			
    4. 
						
  4. Java面向对象--类和对象
			
    面向对象是相对于面向过程而言的,是软件开发方法.面向对象把相关的数据和方法组织为一个整体来看待,从更高的层次来进行系统设计,更贴近事物的自然运行模式.本篇博客介绍Java面向对象的类和对象 目录: 面 ...
    
			
    5. 
						
  5. Mysql部分存储引擎介绍
			
    Mysql存储引擎 什么是存储引擎 mysql中建立的库 --> 文件夹 库中建立的表 --> 文件 ​ 现实生活中我们用来存储数据的文件有不同的类型,每种文件类型对应各自不同的处理机制: ...
    
			
    6. 
						
  6. [CodeIgniter4]故障排除和本地开发服务器
			
    故障排除 以下是一些常见的安装问题,以及建议的解决方法. 我必须在我的URL中包含index.php 如果``/mypage/find/apple``类似的URL``/index.php/mypage ...
    
			
    7. 
						
  7. linux中mysql安装（配图）
			
    环境: 1.操作系统:CentOS release 6.8 (Final) 2.安装版本: mysql-5.6.31-linux-glibc2.5-x86_64.tar.gz 3.下载地址:http: ...
    
			
    8. 
						
  8. java课后作业3
			
    1.动手动脑 由于类中定义了需要参数的构造方法,导致系统不再提供默认的构造方法. 2.java字段初始化 运行结果 100 300 java字段在初始化时先按照对应的构造方法执行.若构造方法中没有对变 ...
    
			
    9. 
						
  9. adb 无线连接手机设备
			
    连接语法: $ adb connect ip:port 断开连接: $ adb disconnect ip:port 可能遇到问题:unable to connect to 192.168.199.2 ...
    
			
    10. 
						
  10. [学习笔记]用Python简易向喜欢的人表白
			
    前几天是情人节,就用Python图像库PIL来搞点事情. 先看图: 其实这样看不出什么来,然后需要放大: 放大以后就能看到你相对女神说的话. 但是对于学计算机的我来说,更想琢磨是怎样的流程完成的这个图 ...
    
			
    11.