アップデート2020：このソリューションはを使用しexecCommandます。この回答を書いている時点ではその機能は問題ありませんでしたが、現在は廃止されていると見なされています。多くのブラウザで引き続き機能しますが、サポートが終了する可能性があるため、使用は推奨されません。
Flash以外の方法もあります（jfriend00の回答に記載されているクリップボードAPIは別として）。テキストを選択してからコマンドを実行する必要がありますcopyをして、ページで現在選択されているテキストをクリップボードにコピーます。
たとえば、この関数は渡された要素のコンテンツをクリップボードにコピーします（PointZeroTwoからのコメントの提案で更新されます）：
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
これがどのように機能するかです：
- 一時的に非表示のテキストフィールドを作成します。
- 要素のコンテンツをそのテキストフィールドにコピーします。
- テキストフィールドのコンテンツを選択します。
- 次のようにコマンドのコピーを実行します。
document.execCommand("copy")。
- 一時テキストフィールドを削除します。
ここで簡単なデモを見ることができます：
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('#p1')">Copy P1</button>
<button onclick="copyToClipboard('#p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
主な問題は、現時点ではすべてのブラウザがこの機能をサポートしているわけではないことですが、次の主要なブラウザで使用できます。
- Chrome 43
- Internet Explorer 10
- Firefox 41
- Safari 10
更新1：これは、純粋なJavaScriptソリューション（jQueryなし）でも実現できます。
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
}
<p id="p1">P1: I am paragraph 1</p>
<p id="p2">P2: I am a second paragraph</p>
<button onclick="copyToClipboard('p1')">Copy P1</button>
<button onclick="copyToClipboard('p2')">Copy P2</button>
<br/><br/><input type="text" placeholder="Paste here for test" />
＃なしでidを渡すことに注意してください。
madzohanとして以下のコメントで報告された、いくつかの例（ローカルファイルを実行している）でGoogle Chromeの64ビット版といくつかの奇妙な問題があります。この問題は、上記の非jQueryソリューションで修正されるようです。
MadzohanはSafariを試してみましたが、解決策は機能しましたが、使用するdocument.execCommand('SelectAll')代わりに.select()（チャットと以下のコメントで指定されています）。
以下のようPointZeroTwoはコメントで指摘し、それが成功/失敗の結果を返しますので、コードを向上させることができました。このjsFiddleでデモを見ることができます。
更新：テキスト形式のままコピー
ユーザがStackOverflowののスペイン語版で指摘し、解決策は、あなたが文字通り要素の内容をコピーしたい完璧場合は仕事上に挙げたが、あなたは形式でコピーしたテキストを貼り付けたい場合、彼らはとして（その偉大動作しません。にコピーされinput type="text"ます。形式は「失われます」）。
そのための解決策は、編集可能なコンテンツにdivコピーしてexecCommandから、同様の方法でを使用してコピーすることです。ここに例があります-コピーボタンをクリックしてから、以下のコンテンツ編集可能ボックスに貼り付けます：
function copy(element_id){
var aux = document.createElement("div");
aux.setAttribute("contentEditable", true);
aux.innerHTML = document.getElementById(element_id).innerHTML;
aux.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
document.body.appendChild(aux);
aux.focus();
document.execCommand("copy");
document.body.removeChild(aux);
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>
そしてjQueryでは、このようになります：
function copy(selector){
var $temp = $("<div>");
$("body").append($temp);
$temp.attr("contenteditable", true)
.html($(selector).html()).select()
.on("focus", function() { document.execCommand('selectAll',false,null); })
.focus();
document.execCommand("copy");
$temp.remove();
}
#target {
width:400px;
height:100px;
border:1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="demo"><b>Bold text</b> and <u>underlined text</u>.</p>
<button onclick="copy('#demo')">Copy Keeping Format</button>
<div id="target" contentEditable="true"></div>