ボタンクリックでコピーアクションは以外にも難しかった

相変わらずwebネタでスイマセン。
今、昼の仕事先の為にHTMLデータを出来るだけ簡単に出力出来るようなアプリを作っていたのですが、出力したコピー動作もボタンでやったほうがPC苦手な人にも良いかな？と思って調べていたのですが、以外にも難しかった覚書です。

ライブラリを使ったほうが良いね

このコピーアクション。てっきりjQueryに簡単な関数で何らかしらあると思ってたら無いのね・・・。
で調べてたら配布されてるライブラリはあるようで↓
【jQuery ZeroClipboard】
ってヤツ。

使い方はググッて調べれば分かる。
ナルホド!!　と言うほど動作の検証はしてないけど、多分まだ僕には書き換えが無理…。
他にもclipboard APIでコピーする方法もあるらしいんだけど、こっちはまだ調べてもいない。
でも良さそう。

結局右クリックでOK

で、色々考えたんだけどライブラリをそのままでも良いかなーと思ったモノの、何かが引っかかって結局右クリックoもしくは　Ctrl+Cで良いんじゃね？って結論に。
まだ完成しないの？とか急かされるの嫌だし。

最終的な方法

最終的にボタンで対象のhtmlをテキストエリアに出力→モーダルウィンドウで展開し中を全選択。
その後ボタンで閉じて終了って流れにした。

サンプルコード

<p id="#sarea">
ここに対象
</p>

<button id="dasu">html出力</button>
<p class="dasu" style="display: none;">
  <textarea id="tcontent"></textarea>
  <button id="toji">閉じる</button>
</p>

<script>
$(document).ready(function(){
 $('#dasu').live('click',function(){
 area = $('#sarea').html();
 $('#tcontent').val(area);
 $('.dasu').slideDown();
 $('#tcontent').select();
 $('#toji').click(function(){
  $('#tcontent').val('');
   $('.dasu').slideUp();
  }); 
 }); 
});
</script>

モーダルにはしてないけど、こんな感じ。

動きは↓

上のコードのhtmlを取得します。
html出力

閉じ

____________________________

別に右クリックで十分でしょー。
余談ですがコード表示はとうとうSyntaxHighlighterを使う事にしました。

ではでは

---

---