https://www.4s5.cn/archives/903.html這篇文章中,我仔細的講解了點擊複製,但是後面我的需求改變了!
我需要多個點擊,並且指定的元素都不同!
所以邊需要封裝函數纔行!
封裝後的代碼
function copyToClipboard(btnId, inputId) {
$('#' + btnId).on('click', function() {
var text = $('#' + inputId).val();
var $temp = $('<textarea>');
$('body').append($temp);
$temp.val(text).select();
document.execCommand('copy');
$temp.remove();
$("#copyModal .modal-body").text("成功!");
$('#copyModal').modal('show'); // 顯示 Bootstrap 彈窗提示
});
}配合了bootstrap的模態彈窗!
可以將這個函數保存到你的 JavaScript 文件中,並在需要的地方調用,例如:
copyToClipboard('copyBtn', 'inputToken');代碼修復
上面的代碼,綁定了點擊事件,但是在我引用的時候,我思考了一下,覺得有些東西沒必要,於是刪減了函數
function copyToClipboard(inputId, backupText, message) {
var text = $('#' + inputId).length > 0 ? $('#' + inputId).val() : backupText;
var $temp = $('<textarea>');
$('body').append($temp);
$temp.val(text).select();
document.execCommand('copy');
$temp.remove();
$("#copyModal .modal-body").text(message || "複製成功");
$('#copyModal').modal('show'); // 顯示 Bootstrap 彈窗提示
}這個函數,只需要填入三個參數:
指定複製元素框的內容
不存在元素框時,則複製第二個參數
複製成功後,提示的內容,可以不要
引入列子
$(document).ready(function() {
$('#copyBtn').on('click', function() {
copyToClipboard("inputToken",'',"成功複製TOKENS,請仔細保存好,泄露之後,需要修改請聯繫管理員!");
});
});我真不太會前端,所以寫得不好的地方,多多原諒!