JavaScript实现点击复制文字与图片到剪贴板
作者:代码拾荒时间:2026-10-28 13:08:19浏览:357
本文介绍了使用JavaScript实现点击后复制文字或图片到系统剪贴板的具体方法。通过简洁实用的代码示例,展示了如何分别处理文本和图像数据的复制逻辑,帮助开发者快速集成相关功能。
JavaScript实现点击复制文字与图片到剪贴板
本文详细介绍了一种利用JavaScript实现点击操作后将文字或图片内容复制到系统剪贴板的技术方案,所提供的代码示例简洁且易于应用。
复制文字功能的代码实现
以下是实现复制文字功能的具体代码:
<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>
读者可以根据实际需求对提供的代码进行测试、修改或进一步完善,以满足特定的业务场景要求。
作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
