JavaScriptでコピー＆ペースト機能を実装する方法-jsチュートリアル-php.cn

JavaScriptでコピー＆ペースト機能を実装する方法

藏色散人

リリース： 2021-11-18 15:51:41

オリジナル

3215 人が閲覧しました

JavaScript でコピーアンドペースト機能を実装する方法: 1. "document.execCommand('copy')" メソッドを使用; 2. ClipboardJS を使用してコンテンツをコピーします。

JavaScriptでコピー＆ペースト機能を実装する方法

この記事の動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript でコピー＆ペースト機能を実装するにはどうすればよいですか?

js でコピーアンドペーストを実装する 2 つの方法

1. はじめに

インターフェースにはコピー関数が必要なので、コピー関数を作成しました。単純な記録として

2. 方法、推奨事項 2.

1.最初のメソッド

1)、 document.execCommand('copy')

2) によるフロントエンドコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>constructor-nodelist</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
 
</head>
<body>
<button onclick="copyText(&#39;copy_file&#39;)">点我复制</button>
<a id="copy_file" href="复制内容" ></a>
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
function copyText(str_file) {
 const btn = document.querySelector(&#39;.&#39;+str_file);
 var copy_val = document.getElementById(str_file)
 var copy_file = copy_val.getAttribute("href");
 btn.addEventListener(&#39;click&#39;,() => {
  const input = document.createElement(&#39;input&#39;);
  document.body.appendChild(input);
  input.setAttribute(&#39;value&#39;, copy_file);
  input.select();
  if (document.execCommand(&#39;copy&#39;)) {
   document.execCommand(&#39;copy&#39;);
   swal("复制成功！","success");
  }
  document.body.removeChild(input);
 })
}
 
</script>
</body>

ログイン後にコピー

3) 概要: 主に、class と id を通して a タグ内の href をコピーし、コピーした内容を生成された input タグに配置し、コピー後に input タグを削除します。内容をコピーして自分で変更することもできます。 js.

4)、問題: 最初のクリックは有効にならず、2 回クリックする必要がありますが、まだ解決されていません

2、2 番目の方法

1)、 ClipboardJS 経由コンテンツをコピーするには、これをお勧めします

2)、git アドレス:clipboardjs(https://clipboardjs.com/)

3)、フロントエンドコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <!-- 请自行去git项目下载 js-->
 <script src="./clipboard.min.js"></script>
 <link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css"/>
 <script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
</head>
<body>
 
<button id="btn" data-clipboard-text="str_555" onclick="copyText()">
 <span>Copy</span>
</button>
</body>
</html>
 
<script>
function copyText() {
 var btn = document.getElementById(&#39;btn&#39;);
 console.log(btn);
  var clipboard = new ClipboardJS(btn);
<!--  var clipboard = new ClipboardJS(btn, {-->
<!--   container: document.getElementById(&#39;btn&#39;)-->
<!--  });--> 如果你的项目是 bootstrap框架，请使用这个
  clipboard.on(&#39;success&#39;, function(e) {
   console.log(e);
   swal("复制成功！","success");
   clipboard.destroy();
  });
 
  clipboard.on(&#39;error&#39;, function(e) {
   console.log(e);
   swal("复制失败","error");
   clipboard.destroy();
  });
}
</script>

ログイン後にコピー

3) 概要: ドキュメントをよく読んでください。このプロジェクトは今でも非常に強力なので、強くお勧めします。

4). 問題: 最初のコピーが有効にならないという問題にも遭遇しましたが、現時点では解決されていません。

3. 概要

1. 最初のコピーが有効にならないという問題に全員が遭遇しました。その後の解決策として、全員が sweetalert を使用しました。

2. 私は Google と Firefox ブラウザでのみ実験しており、使用できます。他のバージョンのブラウザが使用できない場合は、ご自身で他の記事を確認してください。連絡や修正は歓迎です。

推奨学習:「

JavaScript 基本チュートリアル」

以上がJavaScriptでコピー＆ペースト機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。