私たちは 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
次のコードを
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
