[解決済み] クリックボタンでクリップボードにコピー
質問
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/
また、これを行うビルド済みのライブラリは、以下のようになります。 クリップボード.js .
回答の古い、歴史的な部分
JavaScriptで直接クリップボードにコピーすることは、セキュリティ上の理由から、最近のブラウザでは許可されていません。最も一般的な回避策は、ユーザーが直接クリックしたときにのみ起動する、クリップボードへのコピー用のFlash機能を使用することです。
すでに述べたように ゼロクリップボード は、コピーを行うためのFlashオブジェクトを管理するための一般的なコードセットです。私も使ったことがあります。閲覧デバイスにFlashがインストールされていれば(モバイルやタブレットを除外している)、動作します。
次によくある回避策は、クリップボードに格納されたテキストを入力フィールドに配置し、そのフィールドにフォーカスを移動させ、ユーザーに対して Ctrl + C をクリックすると、テキストがコピーされます。
この問題に関する他の議論や可能な回避策は、Stack Overflowへの過去の投稿に記載されています。
Flashを使用する現代的な代替手段を求めるこれらの質問は、多くの質問アップボートを受けましたが、解決策を示す回答はありませんでした(おそらく、何も存在しないからでしょう)。
Internet Explorer と Firefox は、以前はクリップボードにアクセスするための非標準の API を持っていましたが、より最近のバージョンでは、それらの方法は非推奨となっています(おそらくセキュリティ上の理由によるものです)。
があります。 新しい標準化の取り組み は、最も一般的なクリップボードの問題を解決するための "safe" な方法(おそらく Flash ソリューションが要求するような特定のユーザー操作が必要)を考え出そうとしていて、Firefox と Chrome の最新バージョンで部分的に実装されているようですが、私はまだそれを確認していません。
関連
-
[解決済み] divをクリックすると、その下にある要素に移動します。
-
[解決済み] 要素外でのクリックを検出するにはどうすればよいですか?
-
[解決済み] どのラジオボタンが選択されているかをjQueryで知るにはどうしたらよいですか?
-
[解決済み] GoogleのホストされたjQueryを使用する最良の方法、しかしGoogleの私のホストされたライブラリにフォールバックすることは失敗します。
-
[解決済み] ドロップダウンのアイテムの選択値をjQueryで取得する
-
[解決済み] jQuery セレクタ。Id Ends With?
-
[解決済み] val()を使ってselectの値を設定しても、jqueryのchangeイベントが発生しないのはなぜですか?
-
[解決済み] jQueryを使用して要素の型を検索する
-
[解決済み】フォームのhiddenフィールドにjQueryの".val() "を使って値を設定してもうまくいかない。
-
[解決済み】jQueryでRSSをパースする。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jquery 3.0 url.indexOfエラー
-
[解決済み] jQueryです。簡単なオーバーレイを作成するにはどうすればよいですか?
-
[解決済み] jQueryのイベントハンドラを削除する最良の方法?
-
[解決済み] jQuery 複数のイベントで同じ関数を起動する
-
[解決済み] JQueryでラジオボタンがチェックされているかどうかを調べる?
-
[解決済み] .on('click') と .click() の違いについて
-
[解決済み] WebKit の event.layerX と event.layerY に関する問題
-
[解決済み] チェックボックスがチェックされた場合のjQuery
-
[解決済み] jquery input select all on focus
-
[解決済み] jQueryでinput[type=text]の値変化を検出する