So-net無料ブログ作成

[JavaSctipt]文字列をクリップボードにコピーする [Programming JavaScript]

[はじめに]
ブログで記事の内容をクリップボードにコピーする機能を導入する機会があったので、
JavaScriptクリップボードにコピーするコードを作りました。
動作確認は、『Microsoft Internet Explorer11』、『Microsoft Edge』で実施済です。

備忘録として、以下、2つのサンプルソースを掲載します。
2つのサンプルソースは、各々独立して動作します。
<html>
<head>
</head>
<body>

<table border='1'>
<tr><td>
<button
 type="button"
 onClick="
var ta=document.createElement('textarea');
ta.value=this.parentNode.parentNode.parentNode.getElementsByTagName('tr')[1].innerText;
this.appendChild(ta);ta.select();
document.execCommand('Copy');
alert('コピーしました。');
this.removeChild(ta);
"
>
コードのコピー
</button>
</td></tr>
<tr><td><font size="2" color="red">Hello,World!!</font></td></tr>
</table>

</body>
</html>
[JavaScript]文字列をクリップボードにコピーする(その1)


<html>
<head>
<script language="JavaScript">

/// <summary>
/// クリップボードに文字列をコピーする
/// </summary>
/// <param name="targetText">コピー対象の文字列</param>
/// <param name="docWork">ワーク用TextAreaの作成場所。省略時はdocument.body</param>
/// <remarks></remarks>
function copyText(targetText, docWork){

  //[説明]
  // クリップボードにコピーできる文字列は、
  // 入力可能なテキストコントロール(TextArea等)上で
  // 選択状態になっていることが前提となります。
  // この前提により、
  // テキストコントロール以外に記載された文字列を
  // クリップボードにコピーする為には、
  // 一時的にテキストコントロールを経由する必要があります。
  // 本関数では、
  // テキストコントロールを使用しない、かつ、
  // 改行コードを含む文字列の場合を考慮して、
  // 一時的にTextAreaを追加し
  // クリップボードにコピーした後、
  // TextAreaを削除しています。

  if(docWork==null || docWork==undefined){
    //引数docWorkを省略した場合は、
    //document.bodyとする。
    docWork=document.body;
  }

  //ワーク用のTextAreaを作成する。
  var ta=document.createElement("textarea");
  //コピー対象の文字列をTextAreaに書き込む。。
  ta.value=targetText;
  //ワーク用のTextAreaを追加する。
  docWork.appendChild(ta);
  //TextAreaの文字列を全選択する。
  ta.select();
  //選択状態の文字列をクリップボードにコピーする。
  document.execCommand("Copy");
  //コピー完了後のメッセージを表示する。
  alert("コピーしました。");
  //ワーク用のTextAreaを削除する。
  docWork.removeChild(ta);
}

</script>
</head>
<body>

<table border='1'>
<tr><td>
<button 
  type="button"
  onClick="copyText(this.parentNode.parentNode.parentNode.getElementsByTagName('tr')[1].innerText, this);">
  テキストをコピー
</button>
</td></tr>
<tr><td><font size="2" color="red">Hello,World!!</font></td></tr>
</table>

</body>
</html>   
[JavaScript]文字列をクリップボードにコピーする(その2)

nice!(1)  コメント(0) 
共通テーマ:パソコン・インターネット

nice! 1

コメント 0

コメントを書く

お名前:[必須]
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。