[はじめに]
ブログで記事の内容を
クリップボードにコピーする機能を導入する機会があったので、
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]文字列をクリップボードにコピーする（その２） |
