点击复制

法一:复制内容写在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>

转载于:https://www.cnblogs.com/zj911005/p/9377980.html