テキストフィールドにある文字列を、ボタンクリックしてコピーするスニペットを作りました。
以前jQueryで同じようなスニペットを作りましたが、この記事はその仕様と同じものをネイティブなJavaScriptに書き換えたものです。
jQueryでテキストをクリップボードへコピーするスニペット
簡単なコードですが、よかったら最後までご覧ください。
JavaScriptの navigator.clipboard.writeText(); は、要素が持つテキストをクリップボードに書き込みます。
navigator.clipboard.writeText();この記事では、このコードを使ってテキストコピーを行います。
テキストコピーのサンプル
それではサンプルです。
下部にあるボタンをクリックすることで、テキストフィールドにある「ここにコピー用のテキスト」がコピーされます。
シンプルなテキストコピーフィールドです。
実装の手順と方法
スニペットのご紹介の前に、実装の手順と方法について簡単にご説明します。
HTMLを設置したい場所に記述します。
<input type="text" value="ここにコピー用のテキスト" id="myInput" readonly>
<button id="copyButton">テキストのコピー</button>input タグの中身は使う用途によって変更して利用ください。
次に、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は、コピペが辛いスマホユーザーに優しいものなので、シチュエーションに応じて設置を検討してみてください。
