ボタンをクリックしてテキストをコピーする機能をJavaScriptで実装するにはどうすればよいですか?

JavaScript ボタンをクリックしてテキストをコピーする機能を実装するにはどうすればよいですか?

最新のネットワーク アプリケーションでは、共有リンクのコピーや割引コードのコピーなど、テキストをコピーする必要がある状況によく遭遇します。 JavaScript は、この機能を実現する簡単かつ強力な方法を提供します。つまり、ボタンのクリック イベントをリッスンし、ブラウザーが提供するクリップボード API を呼び出してテキストをコピーします。

まず、ボタンとテキスト ボックスを実装するための HTML ファイルが必要です。コードは次のとおりです。

    



    
    复制文本
    

上記のコードでは、テキスト ボックスとボタンを作成し、後続の操作のためにそれぞれに ID を設定しました。

次に、JavaScript ファイル内のテキストをコピーするロジック コードを記述する必要があります。 script.js ファイルを作成し、次のコードを追加します。

window.onload = function() {
    var copyButton = document.getElementById("copyButton");
    copyButton.addEventListener("click", function() {
        var textToCopy = document.getElementById("textToCopy");
        textToCopy.select();
        document.execCommand("copy");
        alert("已复制文本：" + textToCopy.value);
    });
};

上記のコードでは、getElementById メソッドを通じてボタンとテキスト ボックスへの参照を取得しました。 . を選択し、addEventListener メソッドを使用してボタンのクリック イベントをリッスンします。クリック イベントのコールバック関数では、まず getElementById メソッドを通じてコピーするテキストへの参照を取得し、次に select メソッドを呼び出してテキストのテキスト コンテンツを選択します。ボックスに移動し、 document.execCommand("copy") コマンドを使用してコピー操作を実行すると、最後にプロンプ​​ト ボックスがポップアップ表示され、コピーされたテキストが表示されます。

ページが読み込まれた後に JavaScript コードが確実に実行されるようにするために、上記のコードでは window.onload メソッドを使用しました。このようにして、ページが読み込まれるときに JavaScript コードが実行されます。

ここで、ブラウザで HTML ファイルを開き、ボタンをクリックして他の場所に貼り付け、コピーされたテキストが正常に配信されることを確認します。

上記は、JavaScript を使用してボタンをクリックしてテキストをコピーする機能を実装する具体的なコード例です。ボタンのクリック イベントをリッスンし、テキスト ボックスを選択し、ブラウザーが提供するクリップボード API を呼び出すことで、テキスト コピー機能を簡単に実装でき、ユーザーはコンテンツをより便利に共有およびコピーできるようになります。

以上がボタンをクリックしてテキストをコピーする機能をJavaScriptで実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。