ペーストボードのコピー機能をJSで実装する方法

この記事は 20 行の JS コードを分析してペーストボード機能を実装します。これは非常に優れており、必要な友人は参照できます。

クリップボードの使用は基本的なスキルです。コード作成者であれば、Tab、Ctrl/Cmd + A、Ctrl/Cmd + C、Ctrl/Cmd + V がそれぞれオートフォーカス、コピー、ペーストのショートカット キーであることを誰もが知っているはずです。

しかし、一般のユーザーにとっては簡単ではないかもしれません。ユーザーがクリップボードが何であるかを知っていたとしても、非常に優れた視力や反射神経を持つ人を除いて、必要なテキストを正確に強調表示するのは困難です。ユーザーがキーボード ショートカットを知らない場合、非表示の編集メニューが表示できない場合、右クリック メニューを使用したことがない場合、またはタッチ スクリーンを長押しするとオプション メニューが表示されることを知らない場合は、おそらくコピー機能を知らないでしょう。

それでは、ユーザーを支援するために「クリップボードにコピー」ボタンを提供すべきでしょうか?この機能は、キーボード ショートカットに慣れているユーザーにとっても便利です。

クリップボードのセキュリティについて

数年前、ブラウザがクリップボードを直接使用することは不可能でした。開発者は Flash を介して実装する必要がありました。

クリップボードは取るに足らないように思えるかもしれませんが、ブラウザがコンテンツを自由に閲覧して操作できるとしたらどうなるかを想像してみてください。 JS スクリプト (サードパーティのスクリプトを含む) は、クリップボード内のテキスト情報を表示し、パスワード、機密情報、さらにはドキュメント全体をリモート サーバーに送信できます。

現在のクリップボードには基本的な機能が限られており、次の制限があります:

1. Safari を除くほとんどのブラウザはクリップボードをサポートしています。

2. サポートはブラウザによって異なり、一部の機能は不完全またはバグがあります。

3. イベントは、マウスをクリックしたり、キーボードを押したりするなど、ユーザーによって開始される必要があります。スクリプトにはクリップボードへの自由なアクセスがありません。

document.execCommand()document.execCommand（）

此方法就是实现剪贴板的关键，它可以传入 cut , copy , paste 三种参数。从最常用的 document.execCommand（'copy'） 开始介绍。

在使用之前，我们应该检查浏览器是否支持 copy 命令: document.queryCommandSupported('copy'); 或 document.queryCommandEnabled('copy'); ，这两个方法效果相同。

但在Chrome下，尽管Chrome确实支持使用 copy 命名,但两个方法都返回 false 。所以最好是将检查代码包在一个 try-catch 代码块中。

下一步，我们应该允许用户复制什么呢？必须突出显示文本，所有浏览器都可用 select() 方法选择文本input和textarea内的文本。同时Firefox和Chrome / Opera也支持 document.createRange 方法，该方法允许从任何元素中选择文本，如下：

// select text in #myelement node
  var
   myelement = document.getElementById('#myelement'),
   range = document.createRange();
  range.selectNode(myelement);
  window.getSelection().addRange(range);

但IE / Edge不支持。

clipboard.js

若你不想自己实现一个较为健壮的跨浏览器剪贴板方法的话， clipboard.js 可以帮你。它有好几种设置选项的方式，如H5的data属性，设置绑定触发元素以及目标元素，如：

<input id="copyme" value="text in this field will be copied" />
<button data-clipboard-target="#copyme">copy</button>

自己动手实现

clipboard.js大小仅2Kb，若仅实现如下的部分功能的话，那么可以在20行的代码内实现：

仅部分表单元素可被复制

若在不支持的浏览器中（没错，就是指Safari），可突出显示选中文本，并提示用户按 Ctrl / Cmd + C 。

像clipboard.js一样，先创建一个button用于触发方法，它具有一个data属性 data-copytarget ，指向要copy的元素(即 #website )

<input type="text" id="website" value="http://www.sitepoint.com/" />
<button data-copytarget="#website">copy</button>
一个立即执行函数表达式绑定click事件的函数，该函数用于解析 data-copytarget 属性内容，选择对应字段的文本并执行 document.execCommand(&#39;copy&#39;) ,。若失败，文本保持选中状态，显示提示框：
(function() {
 &#39;use strict&#39;;
 // click events
 document.body.addEventListener(&#39;click&#39;, copy, true);
 // event handler
 function copy(e) {
  // find target element
  var
   t = e.target,
   c = t.dataset.copytarget,
   inp = (c ? document.querySelector(c) : null);
  // is element selectable?
  if (inp && inp.select) {
   // select text
   inp.select();
   try {
    // copy text
    document.execCommand(&#39;copy&#39;);
    inp.blur();
   }
   catch (err) {
    alert(&#39;please press Ctrl/Cmd+C to copy&#39;);
   }
  }
 }
})();

示例

虽然在上例中，算上样式和动画的代码，代码已经超过20行了，但动画和样式是可选的。

总结：

1. 通过 .select() 选择要复制的表单元素的内容

2. 调用 document.execCommand("copy") 方法

3. 调用 .blur() 方法，从表单元素中移除焦点

4. 将第2、3步包在 try catch 块中，在不支持的浏览器下则提示

其他方式

有很多新颖的剪贴板应用方式。例如 Trello.com ,将鼠标悬停在卡片上时，可以按 Ctrl / Cmd + C

このメソッドは、カット、コピー、ペーストの 3 つのパラメータを渡すことができます。最も一般的に使用される document.execCommand('copy') から始めましょう。

使用する前に、ブラウザがコピー コマンドをサポートしているかどうかを確認する必要があります: document.queryCommandSupported('copy') または document.queryCommandEnabled('copy');どちらの方法でも効果は同じです。 <p></p>ただし、Chrome ではコピー名の使用をサポートしていますが、どちらのメソッドも false を返します。したがって、チェック コードを try-catch ブロックでラップする方がよいでしょう。 <p><a href="http://www.php.cn/js-tutorial-401130.html" target="_blank">次のステップでは、ユーザーに何をコピーできるようにする必要がありますか?テキストは強調表示する必要があり、すべてのブラウザは select() メソッドを使用してテキスト入力およびテキストエリア内のテキストを選択できます。同時に、Firefox と Chrome/Opera は、次のように、任意の要素からテキストを選択できる <code>document.createRange メソッドもサポートしています: rrreee

ただし、IE/Edge はこれをサポートしていません。

clipboard.js

より堅牢なクロスブラウザーのクリップボード メソッドを自分で実装したくない場合は、clipboard.js が役に立ちます。 H5 のデータ属性、バインディング トリガー要素とターゲット要素の設定などのオプションを設定する方法はいくつかあります。 rrreee

🎜 自分で実装してください🎜🎜🎜clipboard.js のサイズは、次の部分だけを実装した場合、わずか 2Kb です。この関数は、20 行のコードで実装できます: 🎜🎜🎜一部のフォーム要素のみをコピーできます 🎜🎜🎜サポートされていないブラウザ (はい、Safari を意味します) の場合は、選択したテキストが強調表示され、ユーザーに を押すようプロンプトが表示されますCtrl/Cmd + C。 🎜🎜clipboard.jsと同様に、まずメソッドをトリガーするボタンを作成します。これには、コピーされる要素(つまり、#website)を指すデータ属性data-copytargetがあります🎜rrreee🎜例🎜🎜上記の例では、countスタイルとアニメーションのコードはすでに 20 行を超えていますが、アニメーションとスタイルはオプションです。 🎜🎜概要: 🎜🎜🎜🎜 .select() を介してコピーするフォーム要素のコンテンツを選択します 🎜🎜🎜🎜 document.execCommand("copy") メソッドを呼び出します 🎜🎜🎜🎜から .blur() メソッドを呼び出しますフォーム要素 フォーカスを削除します🎜🎜🎜🎜 ステップ 2 と 3 を try catch ブロックで囲みます🎜🎜🎜🎜🎜 他の方法🎜🎜🎜 多くの新しいクリップボード適用方法があります。たとえば、Trello.com では、カードの上にカーソルを置くときに Ctrl / Cmd + C を押して、カードのリンク アドレスをクリップボードにコピーできます。その背後にある実装では、まず URL を含む非表示のフォーム要素を作成し、次にそのコンテンツを選択してコピーします。非常に賢くて便利です - この機能について知っているユーザーはほとんどいないと思います。 🎜🎜上記は私があなたのためにまとめたものです。 🎜🎜関連記事: 🎜🎜🎜JSを使用してループするNodelist Domリストを実装する方法🎜🎜🎜🎜Vueでクリック後にテキストの色が変わる実装方法🎜🎜🎜🎜Vueで別のページの背景色の設定を実装する方法-クリ🎜🎜

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