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

推荐订阅源

U
Unit 42
博客园 - 司徒正美
V
Visual Studio Blog
博客园 - 【当耐特】
T
Tailwind CSS Blog
美团技术团队
博客园 - 叶小钗
Jina AI
Jina AI
宝玉的分享
宝玉的分享
IT之家
IT之家
Hugging Face - Blog
Hugging Face - Blog
雷峰网
雷峰网
Stack Overflow Blog
Stack Overflow Blog
博客园_首页
人人都是产品经理
人人都是产品经理
T
The Blog of Author Tim Ferriss
P
Proofpoint News Feed
Microsoft Security Blog
Microsoft Security Blog
Y
Y Combinator Blog
GbyAI
GbyAI
大猫的无限游戏
大猫的无限游戏
Martin Fowler
Martin Fowler
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
腾讯CDC

博客园 - Insus.NET

Vue3实现拖放式上传 拖放式上传 实现MultipartStreamProvider经Web API上传文档或图片 文件上传和表单字段混合提交 在HttpContext.Current返回null时如何操作 angularjs根据类型动态加载组件 angularjs获取数据服务 扫一扫直连WiFi二维码 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
用户单击文本并复制至剪帖板
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一起。