服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js实现点击后将文字或图片复制到剪贴板的方法

js实现点击后将文字或图片复制到剪贴板的方法

2021-02-03 16:34JavaScript教程网 JavaScript

这篇文章主要介绍了js实现点击后将文字或图片复制到剪贴板的方法,功能非常实用,需要的朋友可以参考下

本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示:

实现复制文字代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>

实现复制图片代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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>

感兴趣的读者可以测试自己测试一下代码,或者对其功能进行修改和完善!

延伸 · 阅读

精彩推荐