JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのnavigator.clipboard.writeText()でテキストのコピー

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

navigator.clipboard.writeText

JavaScriptのnavigator.clipboard.writeText()でテキストのコピー

JavaScriptのnavigator.clipboard.writeText()でテキストのコピー

テキストフィールドにある文字列を、ボタンクリックしてコピーするスニペットを作りました。

以前jQueryで同じようなスニペットを作りましたが、この記事はその仕様と同じものをネイティブなJavaScriptに書き換えたものです。

jQueryのコピー jQueryでテキストをクリップボードへコピーするスニペット
かかかず
かかかず

簡単なコードですが、よかったら最後までご覧ください。

navigator.clipboard.writeText();

JavaScriptの navigator.clipboard.writeText(); は、要素が持つテキストをクリップボードに書き込みます。

navigator.clipboard.writeText();

この記事では、このコードを使ってテキストコピーを行います。

テキストコピーのサンプル

それではサンプルです。

下部にあるボタンをクリックすることで、テキストフィールドにある「ここにコピー用のテキスト」がコピーされます。

かかかず
かかかず

シンプルなテキストコピーフィールドです。

実装の手順と方法

手順と方法

スニペットのご紹介の前に、実装の手順と方法について簡単にご説明します。

HTMLを記述

HTMLを設置したい場所に記述します。

<input type="text" value="ここにコピー用のテキスト" id="myInput" readonly>
<button id="copyButton">テキストのコピー</button>

input タグの中身は使う用途によって変更して利用ください。

JavaScriptの記述

次に、JavaScriptのコードを記述します。

document.getElementById('copyButton').addEventListener('click', () => {
  var copyText = document.getElementById("myInput");

  copyText.select();
  copyText.setSelectionRange(0, 9999);
  //テキストコピー
  navigator.clipboard.writeText(copyText.value);

  alert("「" + copyText.value + "」をコピーしました。");
  console.log(copyText.value);
},);

コードは <body>〜</body> の中の、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

ざっくりとしたコードの解説

コードはHTML・JavaScriptの2種です。CSSは、inputタグの大きさと中央寄せのみなので、割愛します。

HTML

input タグには、「value」にコピーしたいテキストを記述します。また、このタグにHTML属性で readonly を付けておくと、文字入力できないようにできるので、記述しておくと良いと思います。

<input type="text" value="ここにコピー用のテキスト" id="myInput" readonly>
<button id="copyButton">テキストのコピー</button>

button タグのid名は、後述するJavaScriptの .addEventListener で連動させるので、注意してユニークな名称にしましょう。

JavaScript

JavaScriptは .addEventListener のクリックで、input タグで設定した「value」のテキストを取得・コピーをして、アラートウィンドウとconsole.logにその内容を出力します。

document.getElementById('copyButton').addEventListener('click', () => {
  var copyText = document.getElementById("myInput");

  copyText.select();
  copyText.setSelectionRange(0, 9999);
  //テキストコピー
  navigator.clipboard.writeText(copyText.value);

  alert("「" + copyText.value + "」をコピーしました。");
  console.log(copyText.value);
},);

.setSelectionRange(); は、要素の中でテキストを選択状態にするメソッドで、このスニペットでは0文字〜9999文字まで選択できるようにしています。

さいごに

テキストコピーのUIは、コピペが辛いスマホユーザーに優しいものなので、シチュエーションに応じて設置を検討してみてください。