紅穆ノート
レコメンド 言語ノート jQueryを使用して指定されたテキストをコピーする – ファンクションをカプセル化し、複数回呼び出せるようにする
言語ノート JavaScript

jQueryを使用して指定されたテキストをコピーする – ファンクションをカプセル化し、複数回呼び出せるようにする

jQueryを使用して指定されたテキストをコピーする – ファンクションをカプセル化し、複数回呼び出せるようにする

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,请仔细保存好,泄露之后,需要修改请联系管理员!");
  });
});

フロントエンドのスキルがあまりないため、もし記述に不備があった点については、どうかご容赦ください!

微信赞赏

WeChat

支付宝赞赏

Alipay

✍️ クリエイター: 紅穆

ウェブサイト管理者 · ご覧いただきありがとうございます!さらに多くの魅力的なコンテンツをお楽しみいただけますよう、引き続きご支援をお願いいたします。

著者プロフィール プロフィールを見る →

関連記事

おすすめ読書

CSS3のレスポンシブレイズティングにおける課題

CSS3のレスポンシブレイズティングにおける課題 言語ノート CSS

レスポンシブレイズを適用する際、フローティングレイアウトにまだ十分な経験がなかったため、CSS3の最新機能である「弹性ボックスレイアウト」と「グリッドレイアウト」を採用しました。しかし、この方法を用いた際、いくつかの問題に直面しました。以前のコード例:`@media (max-width: 570px) { }`、`@media (max-width: 992px) { }`。ここで、CSSを記述する際には、対象となるサイズ範囲を明確に定義することを推奨します。もし単一の条件のみで対応する場合…
👁 120
比較的完全な軍階級体系(備え用として収集)

比較的完全な軍階級体系(備え用として収集) 趣味

軍階級体系は比較的整備されており、兵士、士官、尉官、校官、将官など、複数の階級を含んでいます。以下に、この体系に含まれるすべての軍階級を詳細に列挙します。一、兵士:兵士が現役で勤務する第1年において、義務兵として就役した者には「列兵」の軍階級が付与されます。上等兵:兵士が現役で勤務する第2年において、「列兵」から「上等兵」に昇格します。二、士官:士官の軍階級は「初級士官」「中級士官」「上級士官」の3段階に分けられ、合計7つの階級があります。これらの階級は、低から高へと順に以下の通りです:初級士官:下士官:通常は義…
👁 910
PbootCMS セキュリティ運用・保守完全ガイド

PbootCMS セキュリティ運用・保守完全ガイド プログラムノート PbootCms

PbootCMSは、無料でオープンソースかつ商用可能なPHPベースの企業ウェブサイト開発・運用管理システムです。その使いやすさと柔軟性から、多くのウェブサイト管理者に支持されています。しかし、ユーザー数が多いという特徴から、このシステムはハッカーによる頻繁なスキャンや攻撃の標的となっています。以下では、基本的なセキュリティ強化から緊急対応までを網羅する体系的なセキュリティ運用・保守ソリューションを紹介します。一、核心的なセキュリティ強化 1.1 プログラムを最新の状態に保つ —— これは最も重要なセキュリティ対策です…
👁 95