ボタンをクリックしてテキストをコピーする機能を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 サイトの他の関連記事を参照してください。