HTML5 ページにクリックしてコピー機能を実装する方法 (完全なコード)-H5 チュートリアル-php.cn

从属性里复制

从另外一个元素复制内容

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 ページにクリックしてコピー機能を実装する方法 (完全なコード)

不言

Sep 01, 2018 pm 01:44 PM

コピー

この記事の内容は、HTML5 ページにクリックしてコピーする機能 (完全なコード) を実装する方法についてです。必要な方は参考にしていただければ幸いです。

実際の作業では、ページ上にリンクがある場合があります。リンクの内容を選択する必要はなく、リンクの内容をクリップボードにコピーするだけです。これは、クリップボードプラグインを使用して実現できます。以下は簡単なデモです。

まず、npm install Clipboard --save-dev を通じてプラグインをインストールできます

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>clipboard示例</title>
    <script src="lib/clipboard/dist/clipboard.min.js"></script>
</head>
<body>

<h2 id="从属性里复制">从属性里复制</h2>
<!--data-clipboard-text属性的值将会被复制-->
<p id="btn" class="js-copy" data-clipboard-text="111-从属性复制">
    <span>复制到剪切板-111</span>
</p>
<hr>

<h2 id="从另外一个元素复制内容">从另外一个元素复制内容</h2>
<textarea id="bar">222-从另外一个元素复制内容</textarea>
<button id="btn2" data-clipboard-target="#bar">复制到剪切板-222</button>
<hr>

<h2>JS里指定复制的内容
<button id="btn3" data-clipboard-target="#bar">复制到剪切板-333</button></h2>

<script>

    //从属性里复制
    var btn = document.getElementById(&#39;btn&#39;);
    var clipboard = new Clipboard(btn);//实例化
    clipboard.on(&#39;success&#39;, function(e) {//复制成功执行的回调，可选
        console.log(e);
    });
    clipboard.on(&#39;error&#39;, function(e) {//复制失败执行的回调，可选
        console.log(e);
    });


    //从另外一个元素复制内容
    var btn2 = document.getElementById(&#39;btn2&#39;);
    var clipboard2 = new Clipboard(btn2);//实例化
    clipboard2.on(&#39;success&#39;, function(e) {//复制成功执行的回调，可选
        console.log(e);
    });
    clipboard2.on(&#39;error&#39;, function(e) {//复制失败执行的回调，可选
        console.log(e);
    });


    //JS里指定复制的内容
    var btn3 = document.getElementById(&#39;btn3&#39;);
    var clipboard3 = new Clipboard(btn3, {
        text: function() {
            return &#39;333-JS里指定复制的内容&#39;;
        }
    });
    clipboard3.on(&#39;success&#39;, function(e) {//复制成功执行的回调，可选
        console.log(e);
    });
    clipboard3.on(&#39;error&#39;, function(e) {//复制失败执行的回调，可选
        console.log(e);
    });

</script>
</body>
</html>

ログイン後にコピー

レンダリング:

コピーボタンをクリックした後、成功コールバック関数は、コピーされたコンテンツとその他の情報を含むオブジェクトを出力します。。このとき、テキストを入力する他の場所で貼り付けショートカットキーを使用すると、クリップボードの内容を必要な場所に貼り付けることができます。

HTML5 ページにクリックしてコピー機能を実装する方法 (完全なコード)

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7533

CakePHP チュートリアル

1379

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

QQ Music から歌詞をコピーする方法歌詞をコピーする方法 Mar 12, 2024 pm 08:22 PM

私たちユーザーは、このプラットフォームを使用する際にいくつかの機能の多様性を理解できるはずであり、いくつかの曲の歌詞は非常によく書かれていることがわかります。何度か聞いて、とても深い意味を感じることもあるので、意味を理解したい場合は、そのままコピーしてコピーライティングとして使いたくなりますが、使いたい場合は、まだ必要です歌詞をコピーする方法を学ぶ必要があります誰もがこれらの操作に慣れていると思いますが、携帯電話での操作は確かに少し難しいです。そこで、よりよく理解するために、今日は編集者がは、あなたを助けるためにここにあります。上記の操作エクスペリエンスのいくつかをわかりやすく説明しています。もし気に入ったら、エディターと一緒に見に来てください。お見逃しなく。

コピーのショートカットキーは何ですか？ Mar 10, 2023 pm 02:00 PM

コピーのショートカットキーは「Ctrl+c」、対応する貼り付けキーは「Ctrl+v」です。コンピュータでは、マウスを使用してテキストをドラッグして選択し、Ctrl キーを押したまま C キーをクリックして完了します。コピー; ショートカットキーとは、特定のキー、キーシーケンス、またはキーの組み合わせによって操作を完了することを指します。

PSコピーレイヤーのショートカットキー Feb 23, 2024 pm 02:34 PM

PS コピーレイヤーのショートカットキーでは、PS を使用しているときにレイヤーをコピーしたい場合、ショートカットキー [Ctrl+J] を使用すると簡単にコピーできることがわかります。レイヤーをコピーするショートカットキーの具体的な操作方法を紹介しますが、以下に詳しい内容を記載していますので、ぜひご覧ください。 PS レイヤーのコピーショートカットキーの答え: [Ctrl+J] 具体的な方法: 1. PS で画像を開き、コピーする必要があるレイヤーを選択します。 2. キーボードの[Ctrl+J]を同時に押して、レイヤーのコピーを完了します。その他のコピー方法： 1. 画像を開いた後、レイヤーを長押しして[新規レイヤー]アイコンを下に移動します。 2. アイコンに移動したら指を放します。 3. レイヤーのコピーが完了します。

コピーのショートカットキー Ctrl に何を追加すればよいですか? Mar 15, 2024 am 09:57 AM

Windows では、コピーのショートカットキーは Ctrl C、Apple では、コピーのショートカットキーは Command C、Linux では、コピーのショートカットキーは Ctrl Shift C です。これらのショートカットキーを知っておくと、ユーザーの作業効率が向上し、テキストやファイルのコピー操作が容易になります。

Excel でテーブルをコピーし、元の形式を維持するにはどうすればよいですか? Mar 21, 2024 am 10:26 AM

Excelで複数の表データを処理することが多いのですが、設定した表をコピー＆ペーストすると元の形式に戻ってしまい、再設定する必要があります。実は、Excelのコピー表を元の形式のままにする方法があり、その具体的な方法を編集者が以下で説明します。 1. Ctrl キーのドラッグとコピーの操作手順: ショートカットキー [Ctrl+A] を使用してテーブルの内容をすべて選択し、移動カーソルが表示されるまでマウスカーソルをテーブルの端に移動します。 [Ctrl]キーを押したままテーブルを目的の位置までドラッグすると移動が完了します。このメソッドは単一のワークシートでのみ機能し、異なるワークシート間で移動できないことに注意してください。 2. 選択的に貼り付ける手順: [Ctrl+A] ショートカットキーを押してすべてのテーブルを選択し、を押します。

コピー＆ペーストのショートカットの使い方を学ぶ Jan 13, 2024 pm 12:27 PM

多くのユーザーがコンピュータを使用するとき、コピー＆ペーストする必要があるものに遭遇した場合、マウスでコピーするのは非常に面倒です. そこで、コピー＆ペーストのためのショートカットキーを使用する方法を教えてください? 詳細なチュートリアルをご覧ください~ショートカットのコピーと貼り付けキーの使用方法: 1. コピーキー: Ctrl+C、コピーするテキストまたは画像を選択し、ショートカットキーを押します。 2. 貼り付けキー: Ctrl+V. 貼り付けたい場所にショートカットキーを直接押すだけです。

Vue でドラッグアンドドロップ要素をコピーして移動するにはどうすればよいですか? Jun 25, 2023 am 08:35 AM

Vue は、便利なドラッグアンドドロップ機能を提供する人気の JavaScript フレームワークで、要素を簡単にコピーしたり移動したりできます。次に、Vue でドラッグアンドドロップ要素をコピーおよび移動する方法を見てみましょう。 1. ドラッグアンドドロップ要素の基本的な実装 Vue でドラッグアンドドロップ要素をコピーおよび移動するには、まず要素の基本的なドラッグアンドドロップ機能を実装する必要があります。具体的な実装方法は以下の通りです。ドラッグする必要がある要素をテンプレートに追加します: <divclass="drag-elem"

CMS DreamWeaver データベースファイルをバックアップするにはどうすればよいですか? Mar 13, 2024 pm 06:09 PM

CMS DreamWeaver データベースファイルをバックアップするにはどうすればよいですか? CMS を使用して Web サイトを構築するプロセスでは、データの損失や損傷を防ぐためにデータベースファイルのセキュリティを確保することが非常に重要です。データベースファイルのバックアップは必須の操作です。以下では、CMS DreamWeaver データベースファイルのバックアップ方法と具体的なコード例を紹介します。 1. バックアップに phpMyAdmin を使用する phpMyAdmin は、データベースを簡単にバックアップできる一般的に使用されるデータベース管理ツールです。以下はphpMyAdmを使用しています

See all articles

HTML5 ページにクリックしてコピー機能を実装する方法 (完全なコード)

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック