Clipboard.js は Flash を必要とせず、テキストのコピーと Cutting_JavaScript スキルを実現するために JS ライブラリに依存しません。

私たちは Web ページにコピー ボタンを配置します。これは主にユーザーがリンクなどの複雑なテキストをコピーしやすくするために使用されます。これまでは、JS を介して Flash に依存したり、jQuery の巨大な JS ライブラリに依存したりしていました。テキストをクリップボードにコピーします。今日紹介したいのは、Flash を必要とせず、他の JS ライブラリに依存しない、非常に最新のプラグインです。それは、clipboard.js と呼ばれます。

オペレーションレンダリング:

HTML
まずローカルのclipboard.jsファイルをロードします。

<script src="clipboard.min.js"></script> 

次に、コピーまたは切り取るテキストフィールドの内容と本文にボタンを追加します。

<input id="foo" value="http://www.jb51.net/article/73145.htm"> 
<button class="btn" data-clipboard-target="#foo" aria-label="复制成功！">复制</button> 

ここでは、HTML5 の data-attribute を使用してコピー オブジェクトのターゲットを見つけます。これは、#foo の値の内容がコピーに成功した後に aria-label 属性で定義されることを示します。コピー情報。コピー結果の情報を求めるために使用されます。
data-clipboard-action 属性もあり、現在の操作がコピーか切り取りかを定義します。data-clipboard-action="cut" の場合、ボタンをクリックすると、WORD と同様にテキストが切り取られます。手術。 。もちろん、切り取り操作はテキストとテキストエリアでのみ機能します。
また、input や textarea などの要素のコンテンツをコピー オブジェクトとして使用する必要はありません。 ata-clipboard-text 属性を使用して、ボタンにコピーするコンテンツを定義できます。 ata- に対応するコンテンツにコピーします。クリップボードのテキスト。

<button class="btn" data-clipboard-text="这里是要复制的内容" aria-label="复制成功！">复制</button> 

JavaScript
次のコードを 3f1c4e4b6b16bbbd69b2ee476dc4f83a の 36cc49f0c466276486e50c850b7e4956 の前に追加し、保存して参照用に開き、ボタンをクリックしてコピーします。

new Clipboard('.btn'); 

もちろん、さらに処理することもできます。たとえば、コピーが完了したら、次のコードを実行するだけで、コピーが成功したことを示すメッセージが表示されます。

var clipboard = new Clipboard('.btn'); 
 
clipboard.on('success', function(e) { 
 var msg = e.trigger.getAttribute('aria-label'); 
 alert(msg); 
 
 e.clearSelection(); 
}); 

上記はフラッシュを必要とせず、他の JS ライブラリに依存しないテキストのコピーと切り取りのプロセスです。皆さんの学習に役立つことを願っています。