勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

クリップボードの操作

   2014/07/03  jQuery

<?

/*

クリックでクリップボードにコピーする。

http://zxcvbnmnbvcxz.com/tips-jquery-auto-copy-button/

を参考にさせて頂きました。

複数コピーしたいところがある場合にスマートに書きたい。

あとボタン式に変えたほうがいいかも。

*/

?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transtional//EN" "http://www.w3c.org/TR/html4/loose.dtd">
<meta http-equiv="content-type" content="text/html"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.zclip.min.js"></script>
<meta cherset = "UTF-8">
<html lang="ja">
<head>
<title>clip_copy</title>
<script>
$(function(){
$("a#copybtn1").zclip({
path:"ZeroClipboard.swf",
copy:$("input#copy1").val(),
beforeCopy:function(){
$('#copybtn1').text('コピー');
},
afterCopy:function(){
$('#copybtn1').text('コピー済');
}
});
$("a#copybtn2").zclip({
path:"ZeroClipboard.swf",
copy:$("input#copy2").val(),
beforeCopy:function(){
$('#copybtn2').text('コピー');
},
afterCopy:function(){
$('#copybtn2').text('コピー済');
}
});
});
</script>
</head>
<body>
<h1>clip_copy</h1>
<input id="copy1" type="hidden" value="てすとてすと">
<a id="copybtn1">コピー</a><br>

<input id="copy2" type="hidden" value="testtest">
<a id="copybtn2">コピー</a><br>
</body>
</html>

 - jQuery

  関連記事

jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...

jQueryでボタンをクリックしてクリップボードにコピー

■2015/11/01追記 以下記事でライブラリとか無しで同様の機能がつけられる ...

さくらのレンタルサーバでCookieが正常に保存できない場合の対応方法

さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...

jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...