1、HTML部分
Click button below to copy current url to clipboard with hidden input
2、CSS部分
.wrapper{
width: 100%;
height: 100%;
text-align: center;
margin-top:10px;
}
.btn-copy{
background-color: #38AFDD;
border: transparent;
border-bottom: 2px solid #0086B7;
border-radius: 2px;
padding: 10px;
min-width: 100px;
color: #fff;
}
.btn-copy:hover, .btn-copy:focus{
background-color: #48A1C1;
border-bottom: 2px solid #38AFDD;
/*transition cross browser*/
transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
-moz-transition:all .3s ease-in;
-o-transition: all .3s ease-in;
}
3、JS部分
var clipboard = new Clipboard('.btn-copy', {
text: function() {
return document.querySelector('input[type=hidden]').value;
}
});
clipboard.on('success', function(e) {
alert("Copied!");
e.clearSelection();
});
$("#input-url").val(location.href);
//safari
if (navigator.vendor.indexOf("Apple")==0 && /\sSafari\//.test(navigator.userAgent)) {
$('.btn-copy').on('click', function() {
var msg = window.prompt("Copy this link", location.href);
});
}4、以下是我的实际实例,flask渲染表格
{% for v in page_data.items %}
{{ v.name }}
{{ v.website }}
{{ v.username }}
************
{{ v.comment }}
编辑
删除
{% endfor %}修改后的版本
有些clipboard.min.js 加载进来不生效,我这边上传一个可以用的
https://cdn.jsdelivr.net/clipboard.js/1.5.10/clipboard.min.js