惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
T
Troy Hunt's Blog
Scott Helme
Scott Helme
T
Threat Research - Cisco Blogs
T
Tenable Blog
L
LINUX DO - 热门话题
V
Visual Studio Blog
I
Intezer
Blog — PlanetScale
Blog — PlanetScale
Cisco Talos Blog
Cisco Talos Blog
A
Arctic Wolf
C
Cyber Attacks, Cyber Crime and Cyber Security
F
Fortinet All Blogs
aimingoo的专栏
aimingoo的专栏
Know Your Adversary
Know Your Adversary
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
N
Netflix TechBlog - Medium
SecWiki News
SecWiki News
I
InfoQ
Microsoft Security Blog
Microsoft Security Blog
Project Zero
Project Zero
W
WeLiveSecurity
Microsoft Azure Blog
Microsoft Azure Blog
A
About on SuperTechFans
Recorded Future
Recorded Future
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Vercel News
Vercel News
S
Securelist
Spread Privacy
Spread Privacy
L
LangChain Blog
云风的 BLOG
云风的 BLOG
G
Google Developers Blog
MongoDB | Blog
MongoDB | Blog
Google DeepMind News
Google DeepMind News
Recent Commits to openclaw:main
Recent Commits to openclaw:main
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
CERT Recently Published Vulnerability Notes
罗磊的独立博客
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
The Last Watchdog
The Last Watchdog
Attack and Defense Labs
Attack and Defense Labs
博客园 - 司徒正美
Help Net Security
Help Net Security
L
Lohrmann on Cybersecurity
人人都是产品经理
人人都是产品经理
Forbes - Security
Forbes - Security
Hacker News - Newest:
Hacker News - Newest: "LLM"
PCI Perspectives
PCI Perspectives
博客园 - 【当耐特】
T
Tor Project blog

博客园 - Insus.NET

User Profile Service 服务未能登录 Visual Studio2026创建Vue项目 安装与配置node.js HTTP Error 403.14 - Forbidden VisualStudio2026回滚上一版本 消息认证码(加强) 网站无法使用插值字符串语法 HMAC(Hash-based Message Authentication Code)认证示例 浏览器自动发送域凭据 企业内小网站兼用Windows验证登录 访问用户控件的函数 onblur事件改为监听处理 将警报消息改为吐司消息 内容有无变化OnBlur即时更新引起的问题与解决 混合式提高用户编辑与操作效率 光标离开文框后即刻更新 WebForm实现Web API JavaScript对GridView删除行后并重新给其数据绑定 把CS值传给JS使用 v2 确认信息confirm由C#后端移至javascript前端 无法发布网站Web Site JavaScript判断字符是否为decimal 点击单元格弹出窗口处理数据返回父页 GridView数据控件中实现单选功能 文本框输入完后直接按回车提交数据 GridView对行进行全选或单选 TextBox文本框允许用户输入正或负小数 Vue3格式化日期时间与插值 SQL Server中验证大小字母和数字 MS SQL Server 数据加密与解密实例 相册由原来Lightbox升级至Vue2瀑布流 从Visual Studio 2022升级至Visual Studio 2026 报表应用图表charts显示数据 钉钉(DingTalk)免登录 Upgrade Outlook Connector 程序中真实应用SignalR Web API路径与IIS站点应用程序名或虚拟目录 在您可以登录前,此副本的 Windows 必须被 Microsoft 激活。您想现在激活它吗 电脑系统由Win10降级Win7折腾还是折腾 System.ComponentModel.Win32Exception: Access is denied
用户单击文本并复制至剪帖板
Insus.NET · 2026-02-09 · via 博客园 - Insus.NET

Html5网页,一些内容,可以让用户点击选中文本,并把选中的文本复制至剪帖板(Clipboard)。
Insus.NET已经实现与测试,记录于此,方便时可以重来查阅与参考。

复制文本到剪贴板(兼容所有浏览器)
2026-01-26_14-21-30

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);
    }
}

View Code

备用复制方法:

2026-01-26_14-41-46

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);
        }
    });
}

View Code

选中元素内的文本(跨浏览器兼容)
2026-02-08_13-10-45

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();
        }
    }
}

View Code

增强版单击复制函数,同时复制并选中
2026-02-08_14-32-24

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);
    });
}

View Code

把以上几个函数集合一起,另存成一个js脚本文件,在需要的地址,引用即可。
当然,你觉得有需要优化与修改的地方自行修改或者让Insus.NET知道。

下面写个示例:
样式,

 
    .click-to-copy {
        cursor: pointer;
    }

        .click-to-copy:hover {
            background-color: #f0f8ff;
            border-color: #1890ff;
        }

View Code


html,

<h3>单击复制示例</h3>
<table style="width:60%;">
    <tr>
        <td style="width:40%;border: 1px solid #b6ff00;">

            <!-- 示例1:普通文本 -->
            <div class="click-to-copy">
                ITEM-2026-301-663-237
            </div>

            <!-- 示例2:带空格的文本 -->
            <div class="click-to-copy">
                ITEM 2026 301 663 237
            </div>

            <!-- 示例3:混合格式 -->
            <div class="click-to-copy">
                PO-2026/01-001-A
            </div>

            <!-- 示例4:使用自定义属性 -->
            <div>
                显示文本:<spcn class="click-to-copy">SPECIAL CODE 123 456</spcn>
            </div>

            <!-- 示例5:表格中的单元格 -->
            <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>

View Code

引用jquery和js脚本,

            <script src="../../Scripts/jquery-3.7.1.min.js"></script>
            <script src="../JScripts/copyToClipboard.js"></script>


javascript,
2026-02-08_16-48-27

 $(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));
     });
 });

View Code

操作演示,
c_text_c

再做一个简单示例,
2026-02-09_11-32-21

非纯javascript实现,得结合jquery一起。