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 弹窗提示
}この関数には、3つのパラメータのみを入力する必要があります:
コピー対象の要素ボックスの内容を指定します。
要素ボックスが存在しない場合、第2引数をコピーします。
コピーが成功した後、表示されるメッセージは省略してもよいです。
例を挿入する
$(document).ready(function() {
$('#copyBtn').on('click', function() {
copyToClipboard("inputToken",'',"成功复制TOKENS,请仔细保存好,泄露之后,需要修改请联系管理员!");
});
});フロントエンドのスキルがあまりないため、もし記述に不備があった点については、どうかご容赦ください!