您的位置:首页 > Web前端 > JavaScript

页面上点击按钮实现复制功能

2017-11-08 15:50 429 查看
引入clipboard.js;

htm代码:

<p class="link-div-p1">优惠券链接:<span id="link-span">http://</span></p>
<!--<span style="font-family:萝莉体;font-size:medium;color: #0a0a0a"></span>-->
<!--<button type="button" onclick="closeDiv()">关闭</button>-->
<p class="link-div-p2">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#link-span" type="button" onclick="copyLink()">复制</button>
</p>


js代码:

function copyLink(){

var spanValue = ""+$(".link-div-p1").children("span").eq(0).text();
if(window.clipboardData){//若果浏览器支持这个功能
window.clipboardData.setData("Text",spanValue);//执行浏览器复制命令
}else{
var clipboard = new Clipboard('.btn');
clipboard.on('success',function(e){
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);
e.clearSelection();
});
clipboard.on("error",function(e){
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});
}

}


这个js的详细使用 来自简书网友
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  js jq