1、HTML部分
<div class="wrapper">
<h3>Click button below to copy current url to clipboard with hidden input</h3>
<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 }}"
style="height:100px;"><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
转载于:https://blog.51cto.com/12080420/2393373