通過 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