ボタンをクリックしてjQueryを使ってクリップボードにコピー
Div内のテキストをクリップボードにコピーする方法私はdivがあり、クリップボードにテキストを追加するリンクを追加する必要があります。これに対する解決策はありますか？
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="copy-text">copy Text</a>
[テキストのコピー]をクリックした後、を押します Ctrl + V貼り付ける必要があります。
2016年時点で編集
2016年の時点で、ほとんどのブラウザでテキストをクリップボードにコピーできるようになりました。ほとんどのブラウザには、選択範囲で機能するdocument.execCommand("copy")を使用してプログラムでテキストの選択範囲をクリップボードにコピーする機能があるからです。
ブラウザでの他の操作（新しいウィンドウを開く操作など）と同様に、クリップボードへのコピーは特定のユーザー操作（マウスクリックなど）によってのみ実行できます。たとえば、タイマーを介して行うことはできません。
これがコード例です。
document.getElementById("copyButton").addEventListener("click", function() {
copyToClipboard(document.getElementById("copyTarget"));
});
function copyToClipboard(elem) {
// create hidden text element, if it doesn't already exist
var targetId = "_hiddenCopyText_";
var isInput = elem.tagName === "INPUT" || elem.tagName === "TEXTAREA";
var origSelectionStart, origSelectionEnd;
if (isInput) {
// can just use the original source element for the selection and copy
target = elem;
origSelectionStart = elem.selectionStart;
origSelectionEnd = elem.selectionEnd;
} else {
// must use a temporary form element for the selection and copy
target = document.getElementById(targetId);
if (!target) {
var target = document.createElement("textarea");
target.style.position = "absolute";
target.style.left = "-9999px";
target.style.top = "0";
target.id = targetId;
document.body.appendChild(target);
}
target.textContent = elem.textContent;
}
// select the content
var currentFocus = document.activeElement;
target.focus();
target.setSelectionRange(0, target.value.length);
// copy the selection
var succeed;
try {
succeed = document.execCommand("copy");
} catch(e) {
succeed = false;
}
// restore original focus
if (currentFocus && typeof currentFocus.focus === "function") {
currentFocus.focus();
}
if (isInput) {
// restore prior selection
elem.setSelectionRange(origSelectionStart, origSelectionEnd);
} else {
// clear temporary content
target.textContent = "";
}
return succeed;
}input {
width: 400px;
}<input type="text" id="copyTarget" value="Text to Copy"> <button id="copyButton">Copy</button><br><br>
<input type="text" placeholder="Click here and press Ctrl-V to see clipboard contents">これはもう少し高度なデモです： https://jsfiddle.net/jfriend00/v9g1x0o6/
また、 clipboard.js を使用してこれを実行するビルド済みのライブラリを入手することもできます。
古い、歴史的な答えの一部
セキュリティ上の理由から、JavaScriptを使用してクリップボードに直接コピーすることは、最近のブラウザでは許可されていません。最も一般的な回避策は、クリップボードへのコピーにFlash機能を使用することです。これはユーザーによる直接クリックによってのみ引き起こされる可能性があります。
すでに述べたように、 ZeroClipboard は、コピーを実行するためにFlashオブジェクトを管理するための一般的なコードセットです。私はそれを使いました。 Flashがブラウジングデバイスにインストールされている場合（これはモバイルまたはタブレットを除外します）、動作します。
次の最も一般的な回避策は、クリップボードにバインドされたテキストを入力フィールドに配置し、そのフィールドにフォーカスを移動して、ユーザーに押すように指示することです。 Ctrl + C テキストをコピーします。
この問題に関する他の議論と可能な回避策はこれらの以前のStack Overflowの記事で見つけることができます。
Flashを使用することに代わる最新の方法を求めるこれらの質問は、多くの質問の支持を受けており、解決策についての答えはありません（おそらく何も存在しないため）。
Internet ExplorerとFirefoxは、クリップボードにアクセスするための非標準のAPIを使用していましたが、最近のバージョンでは（おそらくセキュリティ上の理由から）これらのメソッドは推奨されていません。
最も一般的なクリップボードの問題を解決するための「安全な」方法を考え出すためには、 初期標準化努力 （おそらくFlashソリューションが必要とするような特定のユーザー操作が必要です）があります。 FirefoxとChromeの最新バージョンで部分的に実装されているかもしれませんが、私はまだそれを確認していません。
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" />主な問題は、現時点ですべての ブラウザが この機能をサポートしているわけではないということですが、以下の主要な機能で使用できます。
- クローム43
- Internet Explorer 10
- Firefox 41
- サファリ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 が下記のコメントで報告されているように、64ビット版のGoogle Chromeにいくつかの奇妙な問題があります（ローカルでファイルを実行している）。この問題は上記の非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>clipboard.js は、Flashを使用せずにテキストまたはHTMLデータをクリップボードにコピーできるNiceユーティリティです。使い方はとても簡単です。 .jsをインクルードして次のようなものを使用するだけです。
<button id='markup-copy'>Copy Button</button>
<script>
document.getElementById('markup-copy').addEventListener('click', function() {
clipboard.copy({
'text/plain': 'Markup text. Paste me into a rich text editor.',
'text/html': '<i>here</i> is some <b>rich text</b>'
}).then(
function(){console.log('success'); },
function(err){console.log('failure', err);
});
});
</script>
2016年1月15日に編集： トップの回答 は、2015年8月に投稿された私の回答と同じAPIを参照するための今日の 編集 です。私がjfriend00の答えからこれを引っ張ったのではなく、その逆ではないことを明確にしたいと思います。
改行あり（Alvaro Montoroからの回答の延長）
var ClipboardHelper = {
copyElement: function ($element)
{
this.copyText($element.text())
},
copyText:function(text) // Linebreaks with \n
{
var $tempInput = $("<textarea>");
$("body").append($tempInput);
$tempInput.val(text).select();
document.execCommand("copy");
$tempInput.remove();
}
};
ClipboardHelper.copyText('Hello\nWorld');
ClipboardHelper.copyElement($('body h1').first());
フラッシュやその他の要件を必要としない、さらに優れたアプローチは clipboard.js です。あなたがする必要があるのは、任意のボタンにdata-clipboard-target="#toCopyElement"を追加し、それをnew Clipboard('.btn');で初期化することです。そして、それはid toCopyElementでDOMの内容をクリップボードにコピーします。これはあなたの質問で提供されたテキストをリンクを通してコピーする断片です。
ただし1つの制限は、それがサファリでは動作しないということですが、それはフラッシュを使用していないので、モバイルブラウザを含む他のすべてのブラウザで動作します
$(function(){
new Clipboard('.copy-text');
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
<p id="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="copy-text" data-clipboard-target="#content" href="#">copy Text</a>シンプルさは究極の洗練です。
coppied-to-textを見えるようにしたくない場合
jQuery：
$('button.copyButton').click(function(){
$(this).siblings('input.linkToCopy').select();
document.execCommand("copy");
});
HTML：
<button class="copyButton">click here to copy</button>
<input class="linkToCopy" value="TEXT TO COPY"
style="position: absolute; z-index: -999; opacity: 0;"><input>
<div class="form-group">
<label class="font-normal MyText">MyText to copy</label>
<button type="button" class="btn btn-default btn-xs btnCopy" data="MyText">Copy</button>
</div>
$(".btnCopy").click(function () {
var element = $(this).attr("data");
copyToClipboard($('.' + element));
});
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="css/index.css" rel="stylesheet" />
<script src="js/jquery-2.1.4.min.js"></script>
<script>
function copy()
{
try
{
$('#txt').select();
document.execCommand('copy');
}
catch(e)
{
alert(e);
}
}
</script>
</head>
<body>
<h4 align="center">Copy your code</h4>
<textarea id="txt" style="width:100%;height:300px;"></textarea>
<br /><br /><br />
<div align="center"><span class="btn-md" onclick="copy();">copy</span></div>
</body>
</html>
コンテンツをコピーするのが最も簡単な方法です。
<div id="content"> Lorepm ispum </div>
<button class="copy" title="content">Copy Sorce</button>
function SelectContent(element) {
var doc = document
, text = doc.getElementById(element)
, range, selection
;
if (doc.body.createTextRange) {
range = document.body.createTextRange();
range.moveToElementText(text);
range.select();
} else if (window.getSelection) {
selection = window.getSelection();
range = document.createRange();
range.selectNodeContents(text);
selection.removeAllRanges();
selection.addRange(range);
}
document.execCommand('Copy');
}
$(".copy").click(function(){
SelectContent( $(this).attr('title'));
});
あなたはボタンをクリックすることによってクリップボードのページでコピー入力値のためにこのコードを使うことができます
これはHtmlです
<input type="text" value="xxx" id="link" class="span12" />
<button type="button" class="btn btn-info btn-sm" onclick="copyToClipboard('#link')">
Copy Input Value
</button>
このHTMLでは、このJQueryコードを使用する必要があります。
function copyToClipboard(element) {
$(element).select();
document.execCommand("copy");
}
これがこの質問に対する最も簡単な解決策です。
コピーの目的を簡単に理解するためにこのライブラリを使うことができます！
テキストをクリップボードにコピーするのは難しいことではありません。設定に数十のステップやロードに数百KBを必要とするべきではありません。しかしほとんどの場合、それはFlashや他の肥大化したフレームワークに依存してはいけません。
それがclipboard.jsが存在する理由です。
または
https://github.com/zeroclipboard/zeroclipboard
ZeroClipboardライブラリは、目に見えないAdobe FlashムービーとJavaScript インタフェースを使用してクリップボードにテキストをコピーする簡単な方法を提供します。
コピーするテキストは、<input type="text" id="copyText" name="copyText">のようなテキスト入力です。ボタンをクリックすると、テキストがクリップボードにコピーされるので、buttonは次のようになります。<button type="submit" id="copy_button" data-clipboard-target='copyText'>Copy</button>スクリプトは次のようになります。
<script language="JavaScript">
$(document).ready(function() {
var clip = new ZeroClipboard($("#copy_button"), {
moviePath: "ZeroClipboard.swf"
});
});
</script>
CDNファイルの場合
note ：ZeroClipboard.swfおよびZeroClipboard.js "ファイルは、この機能を使用するファイルと同じフォルダにある必要があります。ORページに<script src=""></script>を含めるように含める必要があります。
jQueryのシンプルなソリューション。
ユーザーのクリックによって引き起こされるべきです。
$("<textarea/>").appendTo("body").val(text).select().each(function () {
document.execCommand('copy');
}).remove();
hTML要素のテキストとは別に、個々のテキストをコピーできます。
var copyToClipboard = function (text) {
var $txt = $('<textarea />');
$txt.val(text)
.css({ width: "1px", height: "1px" })
.appendTo('body');
$txt.select();
if (document.execCommand('copy')) {
$txt.remove();
}
};
両方とも魅力的になります:)、
ジャバスクリプト：
function CopyToClipboard(containerid) {
if (document.selection) {
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("copy");
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("copy");
alert("text copied")
}}
Htmlでも、
<button id="button1" onclick="CopyToClipboard('div1')">Click to copy</button>
<div id="div1" >Text To Copy </div>
<textarea placeholder="Press ctrl+v to Paste the copied text" rows="5" cols="20"></textarea>
hTMLコードはこちら
<input id="result" style="width:300px"/>some example text
<button onclick="copyToClipboard('result')">Copy P1</button>
<input type="text" style="width:400px" placeholder="Paste here for test" />
JSコード：
function copyToClipboard(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(elementId).value);
// 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);
}
Clipboard-polyfill libraryは、最新のPromiseベースの非同期クリップボードAPI用のpolyfillです。
cLIにインストールします。
npm install clipboard-polyfill
クリップボードとしてJSファイルにインポート
window.clipboard = require('clipboard-polyfill');
私はrequire("babel-polyfill");と一緒にそれを使っていて、それをchrome 67でテストしています。
入力フィールドにdisplay: noneが含まれていないことは非常に重要です。ブラウザはテキストを選択しないため、コピーされません。この問題を解決するには、幅0pxのopacity: 0を使用してください。
提案された回答のほとんどは、余分な一時的な隠し入力要素を作成します。今日のほとんどのブラウザはdivコンテンツ編集をサポートしているので、隠し要素を作成せず、テキストフォーマットを維持し、純粋なJavaScriptまたはjQueryライブラリを使用しないソリューションを提案します。
これは私が考えることができるコードの最も少ない行を使ったミニマリストのスケルトン実装です：
//Pure javascript implementation:
document.getElementById("copyUsingPureJS").addEventListener("click", function() {
copyUsingPureJS(document.getElementById("copyTarget"));
alert("Text Copied to Clipboard Using Pure Javascript");
});
function copyUsingPureJS(element_id) {
element_id.setAttribute("contentEditable", true);
element_id.setAttribute("onfocus", "document.execCommand('selectAll',false,null)");
element_id.focus();
document.execCommand("copy");
element_id.removeAttribute("contentEditable");
}
//Jquery:
$(document).ready(function() {
$("#copyUsingJquery").click(function() {
copyUsingJquery("#copyTarget");
});
function copyUsingJquery(element_id) {
$(element_id).attr("contenteditable", true)
.select()
.on("focus", function() {
document.execCommand('selectAll', false, null)
})
.focus()
document.execCommand("Copy");
$(element_id).removeAttr("contenteditable");
alert("Text Copied to Clipboard Using jQuery");
}
});#copyTarget {
width: 400px;
height: 400px;
border: 1px groove gray;
color: navy;
text-align: center;
box-shadow: 0 4px 8px 0 gray;
}
#copyTarget h1 {
color: blue;
}
#copyTarget h2 {
color: red;
}
#copyTarget h3 {
color: green;
}
#copyTarget h4 {
color: cyan;
}
#copyTarget h5 {
color: brown;
}
#copyTarget h6 {
color: teal;
}
#pasteTarget {
width: 400px;
height: 400px;
border: 1px inset skyblue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copyTarget">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<strong>Preserve <em>formatting</em></strong>
<br/>
</div>
<button id="copyUsingPureJS">Copy Using Pure JavaScript</button>
<button id="copyUsingJquery">Copy Using jQuery</button>
<br><br> Paste Here to See Result
<div id="pasteTarget" contenteditable="true"></div>