用户单击文本并复制至剪帖板

还未起名 發表於 2026-2-9 11:37:00

Html5网页，一些内容，可以让用户点击选中文本，并把选中的文本复制至剪帖板(Clipboard)。 Insus.NET已经实现与测试，记录于此，方便时可以重来查阅与参考。 复制文本到剪贴板（兼容所有浏览器） <img src="https://img2024.cnblogs.com/blog/28036/202601/28036-20260126144012196-2009736584.jpg" alt="2026-01-26_14-21-30" loading="lazy">
 
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_d81dfec5-eac0-42b9-a596-2cf9f8ca099f" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_d81dfec5-eac0-42b9-a596-2cf9f8ca099f" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_d81dfec5-eac0-42b9-a596-2cf9f8ca099f" class="cnblogs_code_hide">
<pre>function CopyTextToClipboard(text) {
// 方法1: 使用现代Clipboard API（首选）
if (navigator.clipboard && window.isSecureContext) {
 return navigator.clipboard.writeText(text)
 .then(() => {
 return true;
 })
 .catch(err => {
 return FallbackCopyTextToClipboard(text);
 });
}
else {
 return FallbackCopyTextToClipboard(text);
}
}</pre>
</div>
View Code</div>
 
备用复制方法： <img src="https://img2024.cnblogs.com/blog/28036/202601/28036-20260126144417821-2120075038.jpg" alt="2026-01-26_14-41-46" loading="lazy"> 
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_bb939148-205f-4485-9a83-4fc24058d538" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_bb939148-205f-4485-9a83-4fc24058d538" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_bb939148-205f-4485-9a83-4fc24058d538" class="cnblogs_code_hide">
<pre>function FallbackCopyTextToClipboard(text) {
return new Promise((resolve, reject) => {
 const textArea = document.createElement('textarea');

 // 设置样式确保不可见但可选中
 textArea.style.position = 'fixed';
 textArea.style.top = '0';
 textArea.style.left = '0';
 textArea.style.width = '2em';
 textArea.style.height = '2em';
 textArea.style.padding = '0';
 textArea.style.border = 'none';
 textArea.style.outline = 'none';
 textArea.style.boxShadow = 'none';
 textArea.style.background = 'transparent';
 textArea.style.opacity = '0';

 textArea.value = text;
 document.body.appendChild(textArea);

 // 选中文本
 textArea.select();
 textArea.setSelectionRange(0, textArea.value.length);

 try {
 // 尝试执行复制命令
 const successful = document.execCommand('copy');
 document.body.removeChild(textArea);

 if (successful) {
 resolve(true);
 } else {
 reject(new Error('复制失败'));
 }
 } catch (err) {
 document.body.removeChild(textArea);
 reject(err);
 }
});
}</pre>
</div>
View Code</div>
 
选中元素内的文本（跨浏览器兼容） <img src="https://img2024.cnblogs.com/blog/28036/202602/28036-20260208131501070-466372182.png" alt="2026-02-08_13-10-45" loading="lazy">
 
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_88b7972a-b831-4525-8a53-0922babef953" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_88b7972a-b831-4525-8a53-0922babef953" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_88b7972a-b831-4525-8a53-0922babef953" class="cnblogs_code_hide">
<pre>function SelectText(element) {
// 如果元素本身是input或textarea，直接选中
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
 element.select();
 return;
}

var sel, range;

// 现代浏览器
if (window.getSelection && document.createRange) {
 sel = window.getSelection();
 if (sel.toString() === '') { // 如果没有已选中的文本
 window.setTimeout(function () {
 range = document.createRange();
 range.selectNodeContents(element);
 sel.removeAllRanges();
 sel.addRange(range);
 }, 1);
 }
}
// IE 8及以下
else if (document.selection) {
 sel = document.selection.createRange();
 if (sel.text === '') {
 range = document.body.createTextRange();
 range.moveToElementText(element);
 range.select();
 }
}
}</pre>
</div>
View Code</div>
 
增强版单击复制函数，同时复制并选中 <img src="https://img2024.cnblogs.com/blog/28036/202602/28036-20260208143503862-263760795.png" alt="2026-02-08_14-32-24" loading="lazy">
 
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_5d31f876-c003-4203-b828-77a345b65fd5" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_5d31f876-c003-4203-b828-77a345b65fd5" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_5d31f876-c003-4203-b828-77a345b65fd5" class="cnblogs_code_hide">
<pre>function CopyAndSelect(element) {
// 获取要复制的文本
let textToCopy = '';

// 根据元素类型获取文本
if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
 textToCopy = element.value;
} else {
 textToCopy = element.innerText || element.textContent;
}

// 清理文本（去除首尾空格）
textToCopy = textToCopy.trim();

// 如果有自定义属性，优先使用
if (element.dataset.copyValue) {
 textToCopy = element.dataset.copyValue;
}

// 复制文本到剪贴板
CopyTextToClipboard(textToCopy).then(success => {
 if (success) {
 // 选中元素文本（视觉反馈）
 SelectText(element);

 // 可选：添加视觉反馈样式
 element.classList.add('copied');
 setTimeout(() => {
 element.classList.remove('copied');
 }, 1000);
 }
}).catch(err => {
 console.error('复制失败:', err);
 // 即使复制失败，也选中文本让用户可以手动复制
 SelectText(element);
});
}</pre>
</div>
View Code</div>
 
把以上几个函数集合一起，另存成一个js脚本文件，在需要的地址，引用即可。 当然，你觉得有需要优化与修改的地方自行修改或者让Insus.NET知道。

 下面写个示例： 样式， 
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_b0f376ac-91f0-45c8-ba6f-0fc713bc6c79" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_b0f376ac-91f0-45c8-ba6f-0fc713bc6c79" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_b0f376ac-91f0-45c8-ba6f-0fc713bc6c79" class="cnblogs_code_hide">
<pre>
.click-to-copy {
 cursor: pointer;
}

 .click-to-copy:hover {
 background-color: #f0f8ff;
 border-color: #1890ff;
 }</pre>
</div>
View Code</div>
 html，
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_5a0571e4-e10f-4dd4-85c1-5d1450017113" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_5a0571e4-e10f-4dd4-85c1-5d1450017113" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_5a0571e4-e10f-4dd4-85c1-5d1450017113" class="cnblogs_code_hide">
<pre><h3>单击复制示例</h3>
<table style="width:60%;">
<tr>
 <td style="width:40%;border: 1px solid #b6ff00;">

 
 <div class="click-to-copy">
 ITEM-2026-301-663-237
 </div>

 
 <div class="click-to-copy">
 ITEM 2026 301 663 237
 </div>

 
 <div class="click-to-copy">
 PO-2026/01-001-A
 </div>

 
 <div>
 显示文本：<spcn class="click-to-copy">SPECIAL CODE 123 456</spcn>
 </div>

 
 <table border="1" cellpadding="8" style="margin-top: 20px;">
 <tr>
 <th>物料编码</th>
 <th>描述</th>
 </tr>
 <tr>
 <td class="click-to-copy">MAT-001-2024</td>
 <td>螺丝刀</td>
 </tr>
 <tr>
 <td class="click-to-copy">MAT-002-2024</td>
 <td>扳手</td>
 </tr>
 </table>
 </td>
 <td style="border: 1px solid #b6ff00; padding:0px;">
 <textarea id="TextArea1" cols="50" rows="12" style="border: none; width:100%;"></textarea>
 </td>
</tr>
</table></pre>
</div>
View Code</div>
 
引用jquery和js脚本， 
<div class="cnblogs_code">
<pre> <script src="../../Scripts/jquery-3.7.1.min.js"></script>
 <script src="../JScripts/copyToClipboard.js"></script></pre>
</div>
 javascript， <img src="https://img2024.cnblogs.com/blog/28036/202602/28036-20260208164914147-1808205735.png" alt="2026-02-08_16-48-27" loading="lazy">
 
<div class="cnblogs_code"><img src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" id="code_img_closed_035a6ea2-d00c-46c3-8897-e8c8c49e5027" class="code_img_closed"><img src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" id="code_img_opened_035a6ea2-d00c-46c3-8897-e8c8c49e5027" class="code_img_opened" style="display: none">
<div id="cnblogs_code_open_035a6ea2-d00c-46c3-8897-e8c8c49e5027" class="cnblogs_code_hide">
<pre> $(document).ready(function () {
$(".click-to-copy").click(function (e) {
 // 防止事件冒泡到父元素
 e.stopPropagation();

 // 获取要复制的文本
 var textToCopy = $(this).data('copy-value') || $(this).text().trim();

 // 复制到剪贴板
 CopyTextToClipboard(textToCopy).then(function (success) {
 if (success) {
 // 选中文本（视觉反馈）
 SelectText(this);

 // 添加视觉反馈
 $(this).addClass('copied');
 setTimeout(function () {
 $(this).removeClass('copied');
 }.bind(this), 1000);
 }
 }.bind(this)).catch(function (err) {
 console.error('复制失败:', err);
 // 即使复制失败也选中文本
 SelectText(this);
 }.bind(this));
});
});</pre>
</div>
View Code</div>
 
操作演示， <img src="https://img2024.cnblogs.com/blog/28036/202602/28036-20260209112625440-1202711184.gif" alt="c_text_c" loading="lazy">
 
再做一个简单示例， <img src="https://img2024.cnblogs.com/blog/28036/202602/28036-20260209113630168-2116341470.png" alt="2026-02-09_11-32-21" loading="lazy">
 
非纯javascript实现，得结合jquery一起。 
  
来源：https://www.cnblogs.com/insus/p/19520995

頁: [1]

琼殿技术论坛's Archiver

用户单击文本并复制至剪帖板