【JavaScript】textareaの文字をクリップボードにコピーしよう!【HTML CSS】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。

JavaScriptの解説シリーズです。

今回は入力文字をクリップボードにコピーする方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

入力文字をクリップボードにコピーしよう！

入力欄(textarea)の文字を取得する構文

// テキストエリアの文字を取得
const txt = document.getElementById("テキストエリアのID").value;

クリップボードにコピーする構文

// クリップボードにコピー
navigator.clipboard.writeText("コピーしたいテキスト");

実際に動かしてみよう！

See the Pen
textareaの入力文字をクリップボードにコピー by samehack (@samehack)
on CodePen.

実際にコピーボタンを押下してペーストすると、
入力文字が貼り付けられることが確認できました。
※コードペンのサイトに飛んで操作しないとコピーされないので
　EDIT ON CODEPENをクリックしてから実行してください。

まとめ

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram