js实现点击复制文本内容成功弹出窗框提示


js实现点击复制文本内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <div>
        <span id="copyMy"> 复制我试试</span>
        <button onClick="copyFn()">点击复制</button>
    </div>

<script>
    function copyFn(){
        var val = document.getElementById('copyMy');
        window.getSelection().selectAllChildren(val);
        document.execCommand ("Copy");
    }
</script>
</body>
</html>

美化界面及提示

如果用的是bootstrap v3 框架 显示提示

Bootstrap v3   https://v3.bootcss.com/

具体引用方法自查

Html  本人截取部分内容整体内容按自已实际情况添加


<style>
    button {
        /* 清除默认边框 */
        border: 0;
        outline: none;
        /*清除默认背景 */
        background-color: transparent;
}
</style>
<tr>
    <td>团编号:
        <button type="button" onClick="copyNumber()" role="button" data-toggle="popover" data-trigger="focus" data-content="团编号-复制成功">
            <span id="copyNumber">123456789</span>
       </button>
    </td>
</tr>
<script>
    // 此处是部分情况下弹窗无效,起初始化作用
    $(function () {
        $('[data-toggle="popover"]').popover()
    })
</script>

<script>
    // 此处是点击复制
    function copyNumber() {
        var val = document.getElementById('copyNumber');
        window.getSelection().selectAllChildren(val);
        document.execCommand("Copy");
    }
</script>

案列图片展示

微信截图_20230929163257.png

Bootstrap 弹出框请参看

https://v3.bootcss.com/javascript/#popovers