ボタンをクリックしてテキストをコピーする機能をJavaScriptで実装するにはどうすればよいですか?-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-10-20 18:31:41

オリジナル

1607 人が閲覧しました

JavaScript 如何实现点击按钮复制文本功能？

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

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

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

<!DOCTYPE html>
<html>
<head>
    <title>点击按钮复制文本</title>
</head>
<body>
    <input type="text" id="textToCopy" value="待复制的文本">
    <button id="copyButton">复制文本</button>
    <script src="script.js"></script>
</body>
</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 サイトの他の関連記事を参照してください。