jQuery复制文本到剪贴板示例

ziblog

已于 2025-06-27 15:04:51 修改

阅读量424

点赞数 3

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript

于 2025-05-13 15:10:14 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147925207

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery复制文本到剪贴板示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.container {
margin-top: 50px;
}
.copy-box {
display: flex;
margin-bottom: 20px;
}
#textToCopy {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
}
#copyButton {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
#copyButton:hover {
background-color: #45a049;
}
.status {
color: #666;
font-style: italic;
}
.success {
color: #4CAF50;
}
.error {
color: #f44336;
}
.footer {
margin-top: 50px;
text-align: center;
color: #666;
font-size: 0.9em;
}
</style>
</head>
<body>
<div class="container">
<h1>复制文本到剪贴板示例</h1>
<p>这个示例演示如何使用jQuery实现复制文本到剪贴板的功能。</p>

<div class="copy-box">
<input type="text" id="textToCopy" value="这是要复制的文本内容" readonly>
<button id="copyButton">复制</button>
</div>

<p class="status" id="copyStatus">点击"复制"按钮将文本复制到剪贴板</p>

</div>

<script>
$(document).ready(function() {
$('#copyButton').click(function() {
// 选择输入框中的文本
var copyText = document.getElementById("textToCopy");
copyText.select();
copyText.setSelectionRange(0, 99999); // 对于移动设备

try {
// 执行复制命令
var successful = document.execCommand('copy');
if(successful) {
$('#copyStatus').text('文本已成功复制到剪贴板！').removeClass('error').addClass('success');
} else {
$('#copyStatus').text('复制失败，请手动复制。').removeClass('success').addClass('error');
}
} catch(err) {
$('#copyStatus').text('复制时出错: ' + err).removeClass('success').addClass('error');
}

// 3秒后恢复默认状态
setTimeout(function() {
$('#copyStatus').text('点击"复制"按钮将文本复制到剪贴板').removeClass('success error');
}, 3000);
});

});
</script>
</body>
</html>