这篇文章主要介绍了 js 实现点击后将文字或图片复制到剪贴板的方法, 功能非常实用, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示:
实现复制文字代码:
- <table width="99%" border="0" cellpadding="0" cellspacing="0" class="firtable">
- <tr>
- <th width="100%" style="color: white;">
- <s:text name="询单明细">
- </s:text>
- </th>
- </tr>
- <tr>
- <td align="center">
- <textarea name="inquiryContact1" id="inquiryContact1" rows="15" cols="60"
- readonly="readonly">
- </textarea>
- <div id="inquiryInfoDIV" style="display:none">
- <s:property value="inquiryContact" escape="false" />
- </div>
- <script>
- dojo.byId("inquiryContact1").innerText = dojo.byId("inquiryInfoDIV").innerText;
- </script>
- </td>
- </tr>
- <tr>
- <td align="center">
- <input type="button" id="button" name="button" value="复制" onclick="copyContact()"
- />
- </td>
- </tr>
- </table>
- <script type="text/javascript">
- var i = 0;
- function copyContact() {
- var contat = document.getElementById("inquiryContact1").value;
- window.clipboardData.setData('text', contat);
- if (window.clipboardData.getData('text') == '') {
- if (i == 1) {
- alert("复制失败,请手动Ctrl+C快捷键复制!");
- } else {
- alert("复制失败,请重新复制!");
- i = 1;
- }
- } else {
- alert("内容已经复制到剪贴板!");
- }
- }
- </script>
实现复制图片代码:
- <!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=UTF-8">
- <title>
- Insert title here
- </title>
- <SCRIPT LANGUAGE="JScript">
- var oPopup = window.createPopup();
- function ButtonClick(div) {
- //var div = document.getElementById('divId');
- div.contentEditable = 'true';
- var controlRange;
- if (document.body.createControlRange) {
- controlRange = document.body.createControlRange();
- controlRange.addElement(div);
- controlRange.execCommand('Copy');
- }
- div.contentEditable = 'false';
- }
- </SCRIPT>
- </head>
- <body>
- <div id="divId1">
- <img src="F:/2012070518474964.jpg" onclick="ButtonClick(this)">
- </div>
- </BODY>
- </body>
- </html>
感兴趣的读者可以测试自己测试一下代码,或者对其功能进行修改和完善!
来源: