页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular VUE

javascript实现复制网页上的内容clipboard.js

文本链接 HTML我帮您 10天前  次浏览
起初是使用浏览器提供了 copy 命令 。

document.execCommand("copy")

如果是输入框,可以通过 select() 方法,选中输入框的文本,然后调用  copy 命令,将文本复制到剪切板。但是 select() 方法只对 <input> 和 <textarea> 有效,对于 <p> 就不好用了

 function copyUrl() {
     $("#copyinput").select();  // 选择对象  
     document.execCommand("Copy"); // 执行浏览器复制命令  
     alert("已复制到剪贴板!");
 }

但是#copyinput不能隐藏(display:none or  visibility:hidden or type="hidden"),我想要的是点击一个按钮就能复制隐藏控件的值。

javascript实现点击复制网页上隐的藏内容clipboard.js

 
使用CSS对文本进行伪隐藏
text-indent: -99999px;

position:absolute;left:-99999px;

等方式

<!DOCTYPE html>
<html lang="UTF-8">
<head>
    <meta charset="UTF-8">
    <title>target-div</title>
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <!-- 1. Define some markup -->
    <div style="text-indent: -99999px;">隐藏文本方式进行复制</div>
    <button class="btn" data-clipboard-action="copy" data-clipboard-target="div">Copy</button>

    <!-- 2. Include library -->
    <script src="clipboard.min.js"></script>

    <!-- 3. Instantiate clipboard -->
    <script>
    var clipboard = new ClipboardJS('.btn');

    clipboard.on('success', function(e) {
       //alert('复制成功')
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
</body>
</html>

相关链接

发表评论