最近应产品要求,需要实现一个按钮级别热复制文本功能,效果就是单击按钮复制对应的文本,该文本是需要从数据库里面取出来然后加密的,最初的打算是使用js插件在前台页面搞定。

    于是上网找了一些相关资料,发现几乎都是用的zeroClipBoard这个插件,这个插件使用的是flash来实现复制效果,但是flash在目前已 经不再流行,甚至有些浏览器已经不再对flash支持或者完全禁用,于是便暂时放弃了这个想法。但是在查找途中发现ie竟然可以一句代码搞定复制,顿时觉 得好无语(尤其是对比ie和其他浏览器之后,之前我总是以为ie和其他浏览器相比,麻烦的是 ie)window.clipboardData.setData("Text","这里就是你要复制的文本信息");这里只是简单提一下ie上的复制文 本,回归正题。

  不能用flash来实现,只好使用另外的办法了,我之后是用的java中awt包里面的工具类,简单的说就是调用系统的粘贴板,然后往里面设置文本信息。原理十分简单,下面展示源代码:

 1 package com.mango.online.util;
 2
 3 import java.awt.Toolkit;  4 import java.awt.datatransfer.Clipboard;  5 import java.awt.datatransfer.DataFlavor;  6 import java.awt.datatransfer.StringSelection;  7 import java.awt.datatransfer.Transferable;  8 import java.awt.datatransfer.UnsupportedFlavorException;  9 import java.io.IOException; 10 11 import com.itextpdf.text.Image; 12 13 /** 14  * ClassName:SysClipboardUtil <br/> 15  * Function: 复制到粘贴板 工具类 <br/> 16  * Date: 2016年4月11日 上午9:22:16 <br/> 17  * @author idiotzhang 18  * @version 1.0 19  * @see 20 */ 21 public class SysClipboardUtil { 22 /** 23  * 从剪切板获得文字。 24 */ 25 public static String getSysClipboardText() { 26 String ret = ""; 27 Clipboard sysClip = Toolkit.getDefaultToolkit().getSystemClipboard(); 28 // 获取剪切板中的内容 29 Transferable clipTf = sysClip.getContents(null); 30 31 if (clipTf != null) { 32 // 检查内容是否是文本类型 33 if (clipTf.isDataFlavorSupported(DataFlavor.stringFlavor)) { 34 try { 35 ret = (String) clipTf 36  .getTransferData(DataFlavor.stringFlavor); 37 } catch (Exception e) { 38  e.printStackTrace(); 39  } 40  } 41  } 42 43 return ret; 44  } 45 46 /** 47  * 将字符串复制到剪切板。 48 */ 49 public static void setSysClipboardText(String writeMe) { 50 Clipboard clip = Toolkit.getDefaultToolkit().getSystemClipboard(); 51 Transferable tText = new StringSelection(writeMe); 52 clip.setContents(tText, null); 53  } 54 55 /** 56  * 从剪切板获得图片。 57 */ 58 public static Image getImageFromClipboard() throws Exception { 59 Clipboard sysc = Toolkit.getDefaultToolkit().getSystemClipboard(); 60 Transferable cc = sysc.getContents(null); 61 if (cc == null) 62 return null; 63 else if (cc.isDataFlavorSupported(DataFlavor.imageFlavor)) 64 return (Image) cc.getTransferData(DataFlavor.imageFlavor); 65 return null; 66  } 67 68 /** 69  * 复制图片到剪切板。 70 */ 71 public static void setClipboardImage(final Image image) { 72 Transferable trans = new Transferable() { 73 public DataFlavor[] getTransferDataFlavors() { 74 return new DataFlavor[] { DataFlavor.imageFlavor }; 75  } 76 77 public boolean isDataFlavorSupported(DataFlavor flavor) { 78 return DataFlavor.imageFlavor.equals(flavor); 79 } 80 81 public Object getTransferData(DataFlavor flavor) 82 throws UnsupportedFlavorException, IOException { 83 if (isDataFlavorSupported(flavor)) 84 return image; 85 throw new UnsupportedFlavorException(flavor); 86 } 87 88 }; 89 Toolkit.getDefaultToolkit().getSystemClipboard().setContents(trans, 90 null); 91 } 92 }

  虽然代码贴出来比较多,但是我要用的十分少,只需要第二个“将字符串复制到剪切板”,至于如何调用我就不详细说了(直接通过该类点出第二个方法,传入你要复制的文本信息,嗯,就这么简单)。

   运行起来,效果不错,产品要求的功能是已经实现了。但是我在想这样是不是不太合理,调用系统的粘贴板会不会影响性能。不过暂时也没有办法,就这样吧。。 就这样过了一两天。等项目上线测试时发现复制功能突然间不能用了,我当时就无语了,检查了代码,嗯,没有人动过,除了我。然后再看看本地代码,测试,能运 行。然后锁定出错原因——服务器。

  我在本地用的是windows+eclipse+tomcat,但是服务器上是linux。然后上网查资料了解到linux的系统和Windows不一样,貌似需要做一些什么配置(具体的忘了),没办法,只好重新换方法。

  经久之后还是决定使用最初的想法,使用js前台页面操作复制文本,finally,找到了一个插件。clipboard.js-master,这个插件在我的博客文件里面有,有需要的可以自行下载,链接不太好给。里面还有一些demo相信聪明的你们一定会看懂的。。

  简 单提一下里面的一些东西,重点是js文件,这个只需要引入你自己的项目即可,然后是一个注意点,如果你用的是复制一个文本框里面的内容,它复制成功后会获 取文本框的焦点(也不失焦点,而是选中文本框里面的所有字符串),所以,如果你一但行把该文本框隐藏或者放入一个隐藏的div里面,复制是会失败的。

  我用的还是用button级别复制,把要复制的文本用data-clipboard-text属性赋值即可。意思就是点击该按钮,就会复制fail按钮里面的data-clipboard-text属性的值。具体请参考案列。

  最终我实现的效果就是这样的。。截图为证:

  粘贴出来的东西就是data-clipbord-text里面的值。。。。。。

  这样的效果才是最终我想要的。。。。。。。

  最后提供一下插件下载地址:

点击下载clipboard-master.zip

转载于:https://www.cnblogs.com/idiotalex/p/5435722.html

关于js复制文本信息(按钮级别)相关推荐

  1. js复制文本到剪贴板_如何将文本和图像固定到Windows 10的剪贴板历史记录

    js复制文本到剪贴板 Windows 10 makes copy and paste more convenient with a feature called Clipboard history. ...

  2. js 复制图片到剪切板 和 js复制文本到剪切板

    js 复制图片到剪切板 <a href="javascript:;" id="copyQrcode" data-base=""> ...

  3. js复制文本到剪贴板_如何将输出文本从命令行复制到Windows剪贴板

    js复制文本到剪贴板 If you're doing work at the command line on your Windows box, it's sometimes useful to co ...

  4. Web js复制文本到粘贴板

    Web js复制文本到粘贴板 一.简述 记--简单用js实现将元素的文本内容复制到粘贴板. 二.效果 三.代码 <!DOCTYPE html> <html><head&g ...

  5. js 复制文本的四种方式

    一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.cnblogs.com/xh ...

  6. jQuery/Js复制文本到剪贴板

    <!doctype html> <html lang="en"><head><meta charset="UTF-8" ...

  7. js复制文本(带文本格式or不带文本格式)

    1.js仅直接复制文本(修复ios会自动弹出键盘的问题) const input = document.createElement('input'); document.body.appendChil ...

  8. js 复制文本到剪切板 document.execCommand(“copy“)

    本函数的原理是调用document.execCommand的copy命令 document.execCommand("copy")对不同浏览器的兼容性不同,详情请在这里参考 函数: ...

  9. JS复制文本到剪切板

    // 是否支持复制 export const isSupportCopy = ((!!document.queryCommandSupported) && document.query ...

最新文章

  1. ASP.NET的(HttpModule,HttpHandler)
  2. 【数据挖掘】基于方格的聚类方法 ( 概念 | STING 方法 | CLIQUE 方法 )
  3. 一起学nRF51xx 16 -  adc
  4. [codevs 1227] 方格取数2
  5. 对于 CDN 的多元理解
  6. html桌面图标样式,如何更改图标样式,换桌面图标的方法
  7. pthread_join函数
  8. mysql基本功能+show+innodb+索引+慢sql+explain
  9. linux系统上手工建库步骤,Linux下Oracle手工建库过程
  10. Pandas to_bool
  11. 96% 移动恶意软件针对 Android 系统:逾50亿应用可被攻击
  12. 推理 —— 猜帽子颜色
  13. MYSQL 学习笔记记录整理之二:分组数据
  14. 标准评分卡分数计算原理_学习评分卡Gini指标?这篇看完就够了!
  15. 在线制作车牌效果图_在线快速生成,苹果设备在线样机
  16. win10系统编辑服务器在哪个文件夹,文件夹选项在哪里,小编教你Win10文件夹选项在哪...
  17. 基于ARM的嵌入式系统外围硬件设计
  18. Tomcat 在IE中下载rar文件直接以乱码方式打开解决方案
  19. 从5毛到3块,涪陵榨菜是怎样让我们吃不起的?
  20. 第06周 预习:接口与多态

热门文章

  1. SVN中 “containing working copy admin area is missin
  2. UNIX再学习 -- 文件和目录
  3. C语言再学习 -- 位、字节、字、字长、字元的关系
  4. Leetcode-最长回文子串(5)
  5. FT到底值多少钱——再议Fcoin机制及估值模型
  6. 全能HOOK框架 JNI NATIVE JAVA ART DALVIK
  7. android6.0源码分析之Camera API2.0下的Capture流程分析
  8. ARM64的启动过程之(三):为打开MMU而进行的CPU初始化
  9. Hashtable学习笔记
  10. 在Virtualbox中的Ubuntu虚拟机中,安装Guest Additions客户端增强包时出错:分配介质 虚拟光盘 xxx\VBoxsGuestAdditions.iso 到虚拟电脑