[解決済み] FireFox、Safari、Chromeでテキストをコピーしてクリップボードに置く
2022-09-12 18:17:52
質問
Internet Explorerでは、クリップボードにアクセスするためにclipboardDataオブジェクトを使用することができます。FireFox、Safari、Chromeでそれを行うにはどうしたらよいでしょうか。
どのように解決するのですか?
現在、ほとんどのモダンブラウザで、以下の方法で簡単にこれを行うことができます。
document.execCommand('copy');
現在選択されているテキストをコピーします。textAreaやinputフィールドを選択する場合は
document.getElementById('myText').select();
テキストを目に見えないようにコピーするには、textAreaを素早く生成し、ボックス内のテキストを変更し、それを選択し、コピーし、textAreaを削除することができます。ほとんどの場合、この textArea は画面上に点滅することさえありません。
セキュリティ上の理由から、ブラウザはユーザーが何らかのアクションを起こした場合のみコピーを許可します (たとえば、ボタンをクリックした場合など)。これを行う 1 つの方法は、テキストをコピーするメソッドを呼び出す html ボタンに onClick イベントを追加することです。
完全な例です。
function copier(){
document.getElementById('myText').select();
document.execCommand('copy');
}
<button onclick="copier()">Copy</button>
<textarea id="myText">Copy me PLEASE!!!</textarea>
関連
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptのオブジェクトにキーが存在するかどうかをチェックする?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] Safari、Chrome、IE、Firefox、Operaのブラウザを検出する方法は?
-
[解決済み] CORS OriginヘッダーとCSRFトークンによるCSRF保護
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] Node.jsのES6クラスをrequireで作る
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] クリックボタンでクリップボードにコピー
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] JavaScriptでの大文字小文字を区別しない正規表現
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] javascriptのキャンバスで画像をリサイズする (スムーズ)
-
[解決済み] リダイレクトされずにHTMLフォームを送信する方法