1、HTML部分
<div class="wrapper"> <h4>Click button below to copy current url to clipboard with hidden input</h4> <input type="hidden" id="input-url" value="Copied!"> <button class="btn-copy">Copy</button> </div>
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 %}
<tr>
<td>{{ v.name }}</td>
<td>{{ v.website }}</td>
<td>{{ v.username }}</td>
<td>
<input type="hidden" class="form-control" id="pwd{{ v.id }}" value="{{ v.pwd }}"
><br>
<span>************</span>
<span><button id="{{ v.id }}" class="btn btn-copy" value="{{ v.id }}">复制</button></span>
</td>
<td>{{ v.comment }}</td>
<td>
<a href="{{ url_for('admin.account_edit', id=v.id) }}" type="submit"
class="king-btn king-warning">编辑</a>
<a href="{{ url_for('admin.account_del', id=v.id) }}" type="submit"
class="king-btn king-danger">删除</a>
</td>
</tr>
{% endfor %}<!--<script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>-->
<script src="{{ url_for('static', filename='js/clipboard.min.js') }}"></script>
<script>
$(document).ready(function () {
$(".btn-copy").click(function () {
var val1 = 'pwd'+$(this).val();
var clipboard = new Clipboard('.btn-copy', {
text: function () {
return document.getElementById(val1).value;
}
});
clipboard.on('success', function (e) {
alert("复制成功!");
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);
});
}
})
})
</script>修改后的版本
<script>
$(document).ready(function () {
$(".btn-copy").click(function () {
var val1 = 'pwd'+$(this).val();
var val2 = document.getElementById(val1).value;
$.ajax({
url:"/admin/account/pwd/?pwd_str=" + val2,
async: false,// 这里很关键，不能异步操作，需要先把密码解密后返回来才能复制到剪贴板。
dataType: "text",
success: function (data) {
$("#"+val1).text(data);
}
})
var clipboard = new Clipboard('.btn-copy', {
text: function () {
return $("#"+val1).text();
}
});
clipboard.on('success', function (e) {
alert("复制成功!");
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);
});
}
})
})
</script>有些clipboard.min.js 加载进来不生效，我这边上传一个可以用的
https://cdn.jsdelivr.net/clipboard.js/1.5.10/clipboard.min.js
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
