通过 js 复制隐藏域的内容

2025-01-17 技术教程

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);//safariif (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/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