js实现复制功能
可以使用以下代码实现复制功能:
1 function copyText() { 2 var copyText = document.getElementById("myText"); 3 copyText.select(); 4 document.execCommand("copy"); 5 alert("Text copied to clipboard."); 6 }
其中,myText
是要复制的文本框的 id,这里使用 getElementById()
方法获取了文本框的引用。然后使用 select()
方法选中文本,使用 execCommand('copy')
方法将选中的文本复制到剪贴板中。最后使用 alert()
方法提示复制成功。
你可以将这个功能与一个按钮绑定,例如:
1 2 | < input type="text" id="myText" value="Hello World!"> < button onclick="copyText()">Copy text</ button > |
这里将这个按钮的点击事件与 copyText()
函数绑定,点击按钮后即可触发复制功能。
还有一种方式是使用 Clipboard API,它支持复制、粘贴和剪切文本、HTML 和文件等内容。示例代码如下:
1 2 3 4 5 6 7 8 9 10 | function copyText() { var text = document.getElementById( "myText" ).value; navigator.clipboard.writeText(text) .then( function () { alert( "Text copied to clipboard." ); }) . catch ( function (error) { console.error( 'Failed to copy text: ' , error); }); } |
它的用法与前面的方法类似,只不过使用了 navigator.clipboard.writeText()
方法将文本写入剪贴板,然后可以通过 .then()
方法在成功写入后弹出提示,或者在出现错误时使用 .catch()
方法输出错误信息。
需要注意的是,这种方式需要在 HTTPS 协议下才能使用。如果在 HTTP 协议下使用,需要用户手动授权才能进行剪贴板操作。
或者使用第三方库 clipboard.js
-
clipboard.js 官网:https://clipboardjs.com/
-
clipboard.js Github:https://github.com/zenorocha/clipboard.js
12345678910new
ClipboardJS(
'#copyInput'
, {
text:
function
(trigger) {
return
document.getElementById(
"myInput"
).value;
}
}).on(
'success'
,
function
(e) {
alert(
"复制成功!!!"
);
e.clearSelection();
}).on(
'error'
,
function
(e) {
alert(
'Error!'
);
});
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南