技術

JavaScriptでクリップボードにテキストをコピーする!

投稿日:

こんにちは。たなかです。

ブラウザに表示されている、自動採番されたIDをクリップボードにコピーさせたい、というシチュエーションに遭遇しました。

WebアプリであればJavaScriptで簡単に実装できるとのことで、やり方を備忘録的に書いておこうと思います。

JavaScriptでクリップボードにテキストをコピー

百聞は一見に如かずということでサクッとコード載せちゃいます。どーーん。

// 引き継ぎIDのコピー
function copyToClipboard() {
  // コピー対象をJavaScript上で変数として定義する
  var copyTarget = document.getElementById("copyTarget");
  // コピー対象のテキストを選択する
  copyTarget.select();
  // 選択しているテキストをクリップボードにコピーする
  document.execCommand("copy");
}

キーボードでいうと
copyTarget.select(); でテキストを選択した状態になり、
document.execCommand("Copy"); でctrl + cを押したみたいな動きになります。

ライブラリとか使わず素JSで簡単に書けるんですね。

ちなみに execCommand("paste"); でテキストのペーストもできるらしいですが、セキュリティの問題で動作しないブラウザが多いみたいです。

また今回は「WebViewでモバイル端末のクリップボードにテキストをコピーさせたい」という目論見だったのですが、そのような場合にはJSではなくネイティブ側での対応が必要になるとのことでした。
iOSのWeb(Safar、Chrome、WebView)では execCommand("copy"); が動かないとのことです。

短いですが今回はここまで。

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

TypescriptでMap使用時にコンパイルエラー

こんにちは 連想配列で重複を省く処理をしたい時にMapを使用することがあります。 …

[Xcode]Provisioning ProfileのUUIDを確認する方法

どうも田中です。 iOSアプリの審査に向けて作業している最中、buildエラーに …

[Xcode] iOSソフトウェアアップデート後に、Could not locate device support files.

こんにちは。たなかです。 Xcodeで開発中に以下のエラーにぶつかりました。 エ …

Dockerでwheneverが動かない (bundler: failed to load command: bin/rails (bin/rails))

どうも中田です。 久々の投稿になります。 正確にはwheneverで登録したcr …

no image

【Grunt】楽々デプロイ(grunt-rsync)

どうも、中田です。 gruntでアプリをデプロイするときにどうやったらいいかぁ〜 …