クリップボードについて
■クリップボードについて
実験段階の機能です。
https://www.w3.org/TR/clipboard-apis/
ブラウザ と OS 間で、データをやり取りする事ができます。
ClipboardEvent と、DataTransfer クラスを使用します。
■ ClipboardEvent について
カット/コピー/ペースト操作時に発生するイベントです。
このページでは、主に ClipboardEvent について解説しています。
■ DataTransfer クラスについて
データを格納する入れ物として使用します。
DataTransfer については、こちらで解説しています。
■データフォーマットについて
■クリップボードに格納できるフォーマットについて
以下の種類があります。
| ・ | 文字列 |
| ・ | リンク |
| ・ | HTML 文字列（HTML5 世代） |
| ・ | ファイル（HTML5 世代） |
| ・ | 画像イメージ（HTML5.1 世代） |
■ファイルアクセスについて
ユーザーが任意のファイルをペーストした場合、そのファイルへアクセスが可能になります。
クリップボードにデータを格納する
ブラウザのカット/コピー処理を実行する
document.execCommand() メソッドを使用します。
document.execCommand( aCommandName , aShowDefaultUI , aValueArgument) :Boolean
| 第01引数 | String | カット処理なら "cut"、コピー処理なら "copy" を指定 |
| 第02引数(略可) | Boolean | ここでは省略 |
| 第03引数(略可) | String | ここでは省略 |
| 戻り値 | Boolean | 成功した場合 true、失敗した場合 false |
セキュリティについて
このメソッドは、失敗する事があります。
マウスやキーボードなどの押下操作中に限って、実行する事ができます。
クリップボードの変化について
ブラウザ上で、任意の文字列を選択状態にしてから、コマンドを発行します。
これにより、選択した文字列が、クリップボードに書き込まれます。
使用例
クリック操作のタイミングで、クリップボードに文字列をセットする
// ------------------------------------------------------------
// クリップボードにデータを格納する関数
// ------------------------------------------------------------
function ClipboardSetData(data){
var body = document.body;
if(!body) return false;
var text_area = document.createElement("textarea");
text_area.value = data;
body.appendChild(text_area);
text_area.select();
var result = document.execCommand("copy");
body.removeChild(text_area);
return result;
}
// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
document.onclick = function(e){
// クリップボードにデータを格納する
var result = ClipboardSetData( "テスト文字列です" );
// 出力テスト
console.log(result);
};
テキストエリアの内容をクリップボードにコピーする
<html>
<body>
<textarea id="aaa" style="width:400px; height:200px;" >あいうえお
かきくけこ
さしすせそ</textarea> <br>
<input type="button" id="bbb" value="クリップボードにコピー" >
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// 各エレメントを取得する
// ------------------------------------------------------------
var textarea = document.getElementById("aaa");
var button = document.getElementById("bbb");
// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
button.onclick = function (e){
// テキストエリアをすべて選択
textarea.select();
// ブラウザのコピー処理を実行する
var result = document.execCommand("copy");
// 出力テスト
console.log(result);
};
//-->
</script>
</body>
</html>
カット操作が発生したか監視する
カット操作のイベントは、以下の種類があります。
| イベント名 | 型 | 解説 |
| "cut" | ClipboardEvent | カット操作が行われると実行されるイベント |
カット操作をキャンセルする
preventDefault() メソッドを使用します。
ユーザーによるカット操作を、阻止できます。
DataTransfer オブジェクトを取得する
こちらで解説しています。
クリップボードへの読み取りアクセスについて
カット操作の中身を確認する事はできません。
クリップボードから、データを読み取る事はできません。
クリップボードへの書き込みアクセスについて
クリップボードへ、データを書き込めます。
setData() メソッド等を使用します。
書き込む場合、デフォルトのキャンセルも必要です。
クリック操作から "cut" イベントを発行させる
使用例
"cut" イベントの動作を確認する
<html>
<body>
<textarea style="width:400px; height:200px;" >あいうえお
かきくけこ
さしすせそ</textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// カット操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("cut" , function(e){
// DataTransfer オブジェクトを取得する
var data_transfer = (e.clipboardData) || (window.clipboardData);
// 出力テスト
console.log(data_transfer);
});
//-->
</script>
</body>
</html>
クリック操作のタイミングで、クリップボードに文字列をセットする
// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
window.addEventListener("click" , function(e){
// ブラウザのカット処理を実行する
document.execCommand("cut");
});
// ------------------------------------------------------------
// カット操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("cut" , function(e){
// デフォルトのカット処理をキャンセル
e.preventDefault();
// DataTransfer オブジェクトを取得する
var data_transfer = (e.clipboardData) || (window.clipboardData);
// 文字列データを格納する
data_transfer.setData( "text" , "テスト文字列です" );
});
コピー操作が発生したか監視する
コピー操作のイベントは、以下の種類があります。
| イベント名 | 型 | 解説 |
| "copy" | ClipboardEvent | コピー操作が行われると実行されるイベント |
コピー操作をキャンセルする
preventDefault() メソッドを使用します。
ユーザーによるコピー操作を、阻止できます。
DataTransfer オブジェクトを取得する
こちらで解説しています。
クリップボードへの読み取りアクセスについて
コピー操作の中身を確認する事はできません。
クリップボードから、データを読み取る事はできません。
クリップボードへの書き込みアクセスについて
クリップボードへ、データを書き込めます。
setData() メソッド等を使用します。
書き込む場合、デフォルトのキャンセルも必要です。
クリック操作から "copy" イベントを発行させる
使用例
"copy" イベントの動作を確認する
<html>
<body>
<textarea style="width:400px; height:200px;" >あいうえお
かきくけこ
さしすせそ</textarea>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// コピー操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("copy" , function(e){
// DataTransfer オブジェクトを取得する
var data_transfer = (e.clipboardData) || (window.clipboardData);
// 出力テスト
console.log(data_transfer);
});
//-->
</script>
</body>
</html>
クリック操作のタイミングで、クリップボードに文字列をセットする
// ------------------------------------------------------------
// クリックした時に実行されるイベント
// ------------------------------------------------------------
window.addEventListener("click" , function(e){
// ブラウザのコピー処理を実行する
document.execCommand("copy");
});
// ------------------------------------------------------------
// コピー操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("copy" , function(e){
// デフォルトのコピー処理をキャンセル
e.preventDefault();
// DataTransfer オブジェクトを取得する
var data_transfer = (e.clipboardData) || (window.clipboardData);
// 文字列データを格納する
data_transfer.setData( "text" , "テスト文字列です" );
});
クリップボードからデータを取り出す
クリップボードからデータを読み取るには？
ユーザー操作による許可が必要です。
ユーザーからペースト操作が行われた瞬間に限って、読み取りアクセス可能です。
ペースト操作をユーザーに促すには？
■ペースト可能な要素の一例
<INPUT type="text"> <TEXTAREA>
■任意の要素を編集可能状態に変更する
contentEditable プロパティを使用します。
true を指定します。
DIV 要素を編集可能状態に変更する
<html>
<body>
<div contenteditable="true" style="width:200px; padding:20px 0px; text-align:center; background:#fcc;" >
ここで右クリックを押して<br>
貼り付けて下さい
</div>
</body>
</html>
ペースト操作が発生したか監視する
ペースト操作のイベントは、以下の種類があります。
| イベント名 | 型 | 解説 |
| "paste" | ClipboardEvent | ペースト操作が行われると実行されるイベント |
ペースト操作をキャンセルする
preventDefault() メソッドを使用します。
ユーザーによるペースト操作を、阻止できます。
DataTransfer オブジェクトを取得する
こちらで解説しています。
クリップボードへの書き込みアクセスについて
クリップボードへ、データを書き込む事はできません。
ペースト操作の直前に、データを改変する事はできません。
クリップボードへの読み取りアクセスについて
クリップボードから、データを読み取れます。
getData() メソッド等を使用します。
使用例
"paste" イベントの動作を確認する
<html>
<body>
<div contenteditable="true" style="width:200px; padding:20px 0px; text-align:center; background:#fcc;" >
ここで右クリックを押して<br>
貼り付けて下さい
</div>
<script type="text/javascript">
<!--
// ------------------------------------------------------------
// ペースト操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("paste" , function(e){
// ------------------------------------------------------------
// デフォルトのペースト処理をキャンセル
// ------------------------------------------------------------
e.preventDefault();
// ------------------------------------------------------------
// DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
var data_transfer = (e.clipboardData) || (window.clipboardData);
// ------------------------------------------------------------
// テキストデータを取得する
// ------------------------------------------------------------
var str = data_transfer.getData("text");
// 出力テスト
console.log(str);
});
//-->
</script>
</body>
</html>
ClipboardEvent について
■ ClipboardEvent インターフェースについて
クリップボードに関するイベント情報が格納されます。
■ ClipboardEvent インターフェースの派生について
| Event |
| ↓派生 |
| ClipboardEvent |
■ ClipboardEvent インターフェースのプロパティについて
以下の読み取り専用のプロパティがあります。
| プロパティ名 | 型 | 説明 |
| clipboardData | DataTransfer | DataTransfer オブジェクトが得られる。 |
■ DataTransfer オブジェクトを取得する
clipboardData プロパティを使用します。
■ Internet Explorer 11 以前の場合
Window オブジェクトが保有しています。
window.clipboardData プロパティから取得します。
■取得例
ClipboardEvent から、DataTransfer オブジェクトを取得する
// ------------------------------------------------------------
// コピー操作が行われると実行されるイベント
// ------------------------------------------------------------
window.addEventListener("copy" , function(e){
// DataTransfer オブジェクトを取得する
var data_transfer = (e.clipboardData) || (window.clipboardData);
// 出力テスト
console.log(data_transfer);
});