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

不言
リリース: 2018-09-01 13:44:14
オリジナル
24075 人が閲覧しました

この記事の内容は、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>从属性里复制</h2>
<!--data-clipboard-text属性的值将会被复制-->
<p id="btn" class="js-copy" data-clipboard-text="111-从属性复制">
    <span>复制到剪切板-111</span>
</p>
<hr>

<h2>从另外一个元素复制内容</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 ページにクリックしてコピー機能を実装する方法 (完全なコード)

関連する推奨事項:

HTML5のドラッグアンドドロップコピー機能の実装

html5ページクリックと左右スライドページscroll_html/css_WEB-ITnose

以上がHTML5 ページにクリックしてコピー機能を実装する方法 (完全なコード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!