通过 js 复制隐藏域的内容

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