点击复制

法一:复制内容写在input里

html：

    <div class="type1">
        <h4>法一:复制内容写在input里</h4>
        <input type="text" class="copy-text1" value="input这里是要被复制的文字">
        <input type="button" onClick="copyRun()" value="点击复制">
    </div>

js:

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

---

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

html:

    <div class="type2">
        <h4>法二:复制内容写在是span里</h4>
        <span>span这里是要被复制的内容</span>
        <div class="btn">点击复制</div>
    </div>

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:

    <div class="type3">
        <h4>法三:兼容ios</h4>
        <div id="foo">喵口令</div>
        <div class="product-copy" data-clipboard-action="copy" data-clipboard-target="#foo">复制口令</div>
    </div>

js:

<script src="clipboard-min.js"></script>
new Clipboard('.product-copy');

---

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

html:

    <div class="perfect">
        <h4>完美兼容</h4>
        <span id="copyText">￥zz❤pp￥</span>
        <div class="copy-btn" data-clipboard-action="copy" data-clipboard-target="#copyText">复制口令</div>
    </div>

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 引入插件

<script src="js/clipboard.min.js"></script>

2基本使用

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

new Clipboard('.btn');

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

<!-- Target -->
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<!-- Trigger -->
<button class="btn" data-clipboard-target="#foo">
</button>

另外还有另外一个属性data-clipboard-action属性，以指定是要要么copy还是要cut操作。默认情况下是copy。cut操作只适用于<input>或<textarea>元素。

<!-- Target -->
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<!-- Trigger -->
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
</button>

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

<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>