検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Flash や JS ライブラリに依存せずにテキストのコピーと切り取りを実現します。ソース コードのダウンロードには、JavaScript スキルが含まれます。

Flash や JS ライブラリに依存せずにテキストのコピーと切り取りを実現します。ソース コードのダウンロードには、JavaScript スキルが含まれます。

WBOY
WBOYオリジナル
2016-05-16 15:37:01926ブラウズ

レンダリングは次のとおりです:

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

デモを見る ソースコードをダウンロード

HTML

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

コードをコピーします コードは次のとおりです:

<スクリプト src="clipboard.min.js">

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

コードをコピーします コードは次のとおりです:



ここでは、HTML5 の data-attribute を使用してコピー オブジェクトのターゲットを見つけます。これは、#foo の値の内容がコピーに成功した後に aria-label 属性で定義されることを示します。コピー情報。コピー結果の情報を求めるために使用されます。


data-clipboard-action 属性もあり、現在の操作がコピーか切り取りかを定義します。data-clipboard-action="cut" の場合、ボタンをクリックするとテキストが切り取られます。続いて WORD を実行しても同様に動作します。もちろん、切り取り操作はテキストとテキストエリアでのみ機能します。

input や textarea などの要素のコンテンツもコピー オブジェクトとして必要ありません。ata-clipboard-text 属性を使用して、ボタンをクリックしてコンテンツにコピーするコンテンツを定義できます。 ata-clipboard-text に対応します。

コードをコピーします コードは次のとおりです:


JavaScript

次のコードを