ペーストボードのコピー機能を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属性，设置绑定触发元素以及目标元素，如：

 copy

自己动手实现

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

仅部分表单元素可被复制

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

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

 copy 一个立即执行函数表达式绑定click事件的函数，该函数用于解析 data-copytarget 属性内容，选择对应字段的文本并执行 document.execCommand('copy') ,。若失败，文本保持选中状态，显示提示框： (function() { 'use strict'; // click events document.body.addEventListener('click', 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('copy'); inp.blur(); } catch (err) { alert('please press Ctrl/Cmd+C to copy'); } } } })();

示例

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

总结：

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

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

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

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

其他方式

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