位置：首页>> 网络编程>> JavaScript>> js实现点击后将文字或图片复制到剪贴板的方法

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

作者：shichen2014　　发布时间：2024-04-30 09:51:07　

标签：js,点击,文字,图片,复制,剪贴板

本文实例讲述了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>

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

投稿

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

猜你喜欢