点击复制

法一:复制内容写在input里

html：

    

        
法一:复制内容写在input里
        
        
    

js:

        function copyRun(){
            $('.copy-text1').select();  // 选择对象
            document.execCommand('copy');   // 执行浏览器复制命令
            alert('复制成功！');
        }

---

法二:复制内容写在是span里

html:

    

        
法二:复制内容写在是span里
        span这里是要被复制的内容
        
点击复制
    

js:

        function Copy(str){
            var save = function(e){
                e.clipboardData.setData('text/plain', str);
                e.preventDefault();
            }
            document.addEventListener('copy', save);
            document.execCommand('copy');
            document.removeEventListener('copy',save);
            alert('复制成功！');
        }
        $('.type2').on('click', 'div.btn', function(){
            Copy($(this).prev('span').text());
        });

---

法三:兼容IOS

html:

    

        
法三:兼容ios
        
喵口令
        
复制口令
    

js:

new Clipboard('.product-copy');

---

前两种方法不兼容ios设备，现有一种兼容性良好的完美解决方案：

html:

    

        
完美兼容
        ￥zz❤pp￥
        
复制口令
    

js:

    // 完美兼容
        new Clipboard('.copy-btn');
        function copyPerfect(str){
            var save = function(e){
                e.clipboardData.setData('text/plain', str);
                e.preventDefault();
            }
            document.addEventListener('copy', save);
            document.execCommand('copy');
            document.removeEventListener('copy',save);
        }
        $('.perfect').on('click', '.copy-btn', function(){
            copyPerfect($(this).prev('#copyText').text());
            $(this).html('复制成功');
        });

css:

        /* pc端屏蔽选中样式,但是ios上不能有此样式否则复制不成功 */
        body{
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -o-user-select: none;
            user-select: none;
        }

demo链接： https://pan.baidu.com/s/1i5eUgQh

---

扩展：

clipboard.js基本使用

clipboard.js 是一个不需要flash，将文本复制到剪贴板的插件。

1 引入插件

2基本使用

首先需要您需要通过传递DOM选择器，HTML元素或HTML元素列表来实例化它。

new Clipboard('.btn');

1用一个元素当触发器来复制另一个元素的文本,data-clipboard-target属性后需要跟属性选择器

另外还有另外一个属性data-clipboard-action属性，以指定是要要么copy还是要cut操作。默认情况下是copy。cut操作只适用于或元素。</p> <pre><code><!-- Target --> <textarea id="bar">Mussum ipsum cacilds... Cut to clipboard

2从属性中复制文本，不需要另一个元素当触发器，可以使用data-clipboard-text属性，在后面放上需要复制的文本.

    Copy to clipboard