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