超簡単！テキストをクリップボードへコピー

超簡単！テキストをクリップボードへコピー

JavascriptとHtmlだけで超お手軽！テキストのクリップボードへのコピー
Javascript実質3行
しかも、Javascriptのライブラリ類は使いません。

クリップボードへのコピー手順

やってることは、通常人が操作してるコピーと同じことをJavascriptで実行するだけ。
どういうことかと言うと
１．コピーするテキストを特定する
２．特定したテキストを選択（ハイライト)します。
３．クリップボードへコピーの実行。
だだこれだけです。

では、順を追って説明していきます。
が、その前にターゲットとなるテキストを準備しておきます。

コピー対象となるテキストを準備

これは単純にhtmlのテキストエリア（テキストボックスでもOK)

<textarea rows="5" readonly>今日は良い天気です。</textarea>

ですが、Javascriptにどのテキストなのか識別させ易いように「id」を付けときます。

<textarea id="texta" rows="5" readonly>今日は良い天気です。</textarea>

これで「texta」で識別させることが出来るようになりました。
また、PHPからテキストを代入したいのなら

<?php
$sample1 = "今日は良い天気です。";
?>

<textarea id="texta" rows="5" readonly><?=$sample1?></textarea>

こんな感じでいかがでしょう

１．コピーするテキストを特定

「targetdoc」(ターゲットドキュメント←適当です)
と言う変数を作り
これにテキストを特定させます。

var targetdoc = document.getElementById("id名");

コード的にはこうなるのでしょうか
id名を、「texta」に置き換えればOKです。

ここで、汎用性を持たせるために[id名」は変数「id」にしておきましょう

２．特定したテキストを選択（ハイライト化)

「targetdoc」が目的のテキストなので、これをセレクトメソッドで選択します。

      targetdoc.select();

これで良いと思います。

３．クリップボードへコピーの実行

選択（ハイライト化）したものをクリップボードへコピーするコマンドがあるのでそれを使います。

      document.execCommand("copy");

便利ですね。

関数に仕上げる

関数名は「Copt2Clipboard」とでもして
１～３を組み合わせると

// クリップボードへコピー関数
//
function Copy2Clipboard(id){
      var targetdoc = document.getElementById(id);
      targetdoc.select();
      document.execCommand("copy");
}

こうなりました。

テキストのクリップボードへのコピー

サンプルとしてのコードは以下になりました。

<?php
$sample1 = "今日は良い天気です";
?>

<textarea id="texta" rows="5" readonly><?=$sample1?></textarea>
<br>
<input type="button" value="コピー" onClick="Copy2Clipboard('texta')">
<br>



<script type="text/javascript">
<!--
// クリップボードへコピー関数
//
function Copy2Clipboard(id){
      var targetdoc = document.getElementById(id);
      targetdoc.select();
      document.execCommand("copy");
}
-->
</script>

そして、コピー対象が、テキストボックスの場合は。
htmlの部分のみ変わって

<?php
$sample2 = "明日は雨です";
?>

<input id="textb" type="text" value="<?=$sample2?>" readonly>
<br>
<input type="button" value="コピー" onClick="Copy2Clipboard('textb')">