复制，剪切插件clipboard

实现复制，剪切文字内容

　　先引入js插件：

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>

　

　　第二步新建对象：

<script type="text/javascript">
        // 复制下一个标签的内容
        //         new ClipboardJS('.btn', {
        //             target: function(trigger) {
        //                 return trigger.nextElementSibling;
        //             }
        //         });
        // 复制本身 aria-label 的值
        //         new ClipboardJS('.btn', {
        //             text: function(trigger) {
        //                 return trigger.getAttribute('aria-label');
        //             }
        //         });

        //         new ClipboardJS('.btn', {
        //             container: document.getElementById('modal')
        //         });

        var clipboard = new ClipboardJS('.btn');

        clipboard.on('success', function(e) {
            // 获取文本方式:复制(copy)/剪切(cut)
            //             console.info('Action:', e.action);
            // 获取的文本内容
            //             console.info('Text:', e.text);
            // 获取文本的目标
            //             console.info('Trigger:', e.trigger);
            // 
            e.clearSelection();
        });
        
        // 貌似是禁止复制(用完关掉才是王道)
        // clipboard.destroy()
        
        //         clipboard.on('error', function(e) {
        //             console.error('Action:', e.action);
        //             console.error('Trigger:', e.trigger);
        //         });
    </script>

　

　　第三步创建元素确认要复制内容与方式：

　　

　　　　　<div id="fn" value="复制的文本在这里" aria-label="测试文本">
            value貌似是input标签才能用的,在其他的标签中value内容不会被操作，而是直接操作元素内容
        </div>
        
        <!-- 当使用input标签时，操作内容则是value内部内容 -->
        <input type="" name="" id="fn1" value="这是input内的文本" />
        
        <text id="modal">这是text文本</text>
        
        <!-- 下列按钮为操作按钮 其中data-clipboard-target用来确定复制的目标 -->
        <button type="button" class="btn" data-clipboard-target="#fn">复制啊</button>
        <!-- data-clipboard-action 用来确定复制的方式(剪切与拷贝)，默认为拷贝 -->
        <button type="button" class="btn" data-clipboard-target="#fn1" data-clipboard-action="cut">剪切啊</button>
        <!-- data-clipboard-text 则是要复制的内容 -->
        <button type="button" class="btn" data-clipboard-text="#modal" aria-label="我复制">复制自己啊</button>

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　字太难看，不想动笔，此章为印，加深记忆，往后若遇，来此考古。