SSブログ
2019年03月09日｜ 2019年03月10日 ｜2019年08月11日 ブログトップ

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

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

備忘録として、以下、２つのサンプルソースを掲載します。
２つのサンプルソースは、各々独立して動作します。
<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]文字列をクリップボードにコピーする（その１）


<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]文字列をクリップボードにコピーする（その２）

タグ：クリップボードにコピー コピー クリップボード JavaScript
2019-03-10 14:54  nice!(1)  コメント(0) 
共通テーマ：パソコン・インターネット
2019年03月09日｜ 2019年03月10日 ｜2019年08月11日 ブログトップ

Digital Watch


So-netブログ

So-net無料ブログ作成

ブログ紹介

koalatch_icon.jpg
こあらっちの日記

LicenseLogo

【MCP上位資格】
MCTS(Microsoft Certified Technology Specialist)
MCTS：(Technology Specialist)
・For DynamicsAX2012(2013.2取得）
・For SharePoint2010(2012.10取得）
・For SQLServer2008(2012.8取得）
・For DynamicsAX2009(2011.6取得）
・For .NET2.0 WebApp(2011.5取得）
・For .NET2.0 WinApp(2009.2取得）

MCSD(Microsoft Certified Solution Developer)
MCSD：(Solution Developer)
・For Microsoft.NET(2006.6取得）
・For VisualStudio6.0(2001.9取得）

MCAD(Microsoft Application Developer)
MCAD：(Application Developer)
・For Microsoft VB.NET(2003.4取得）
・For Microsoft C#.NET(2003.4取得）

MCDBA(Microsoft Certified DataBase Administrator)
MCDBA：(DB Administrator)
・For SQLServer7.0 (2001.12取得）

【MCP】（24科目取得）
MCP(Microsoft Certified Professional)
【開発系】
・70-483
　C#でのプログラミング
・70-528
　Webアプリ開発(.NET2.0)
・70-526
　Windowsアプリ開発(.NET2.0)
・70-536
　アプリケーション開発基礎(.NET2.0)
・70-300
　ソリューションアーキテクチャ(VS.NET)
・70-310
　XMLWebService開発(VB.NET)
・70-320
　XMLWebService開発(C#.NET)
・70-305
　Webアプリ開発(VB.NET)
・70-315
　Webアプリ開発(C#.NET)
・70-306
　Windowsアプリ開発(VB.NET)
・70-316
　Windowsアプリ開発(C#.NET)
・70-100
　ソリューションアーキテクチャ（VS6）
・70-176
　デスクトップアプリ開発(VB6)
・70-175
　分散アプリ開発(VB6)
【データベース系】
・70-433
　データベース開発(SQLServer2008)
・70-432
　実装とメンテナンス(SQLServer2008)
・70-229
　DBデザインと実装(SQLServer2000)
・70-028
　DBデ管理(SQLServer7.0)
・70-029
　DBデザインと実装(SQLServer7.0)
【インフラ系】
・70-210
　Windows2000Professional
・70-215
　Windows2000Server
【その他】
・70-573
　SharePoint2010アプリ開発
・MB6-872
　DynamicsAX2012のｲﾝｽﾄｰﾙ
・MB6-822
　DynamicsAX2009の生産

【Oracle認定資格(Java)】
（3科目取得）
JavaSE8_Gold.jpg
・1Z0-809
　Java Gold SE 8 (2019.7取得)

JavaSE8_Silver.jpg
・1Z0-808
　Java Silver SE 8 (2018.7取得)

JavaSE7_8_Bronze.jpg
・1Z0-814
　Java Bronze SE 7/8 (2017.8取得)

【LPIC認定上位資格】
・LPICレベル１(2021.2取得)
【LPIC認定資格】
・LPIC-1 101：LPICレベル１ 101(2021.2取得)
・LPIC-1 102：LPICレベル１ 102(2021.1取得)

【情報処理】
・第1種情報処理技術者(2000.4取得)
・第2種情報処理技術者(1998.4取得)

【その他IT】
・AWS認定Solutions Architect Associate Level(2014.8取得)

【その他】
・アマチュア無線 電話級(1987.8取得)

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。