クリップボードにコピーを実装するとなると、「clipboard.js」っていう便利なものがあるんですけど、これって「<input>」 のテキストかテキストエリアがどうしても必要なんです。
今回は、下にあるようなボタンだけを使ってコピーを実装させてみようという試みをした時の記事になります。
結論から言うと、クリップボードにコピーさせるには、テキストを選択させる必要があるので、必ず「<input type="text">」が必要になってしまいます。
そこで、この「<input type="text">」を非表示にする手段をあれこれ試してみました。
結果、CSSにて非表示にするには、下の設定が必要になります。
・font-size：1px;
・width：1px;
・height：0px;
・opacity：0;
・border：none;
上記を「<input type="text">」にあてがってあげれば、あら不思議、見えなくなります。
最初は、widthを0にしたりしてやってみたのですが、それだと文字列が選択されませんでした。あと、フォントサイズを1pxに設定するところがコツで、widthよりfont-sizeが大きいとコピーされないこともわかりましたよ。
ということで、クリップボードにコピーを実装してみました。
javascriptの document.execCommand を使うんですけど、document.execCommand('copy')コマンド以外にも色々あるんですね。
使う機会があったら使ってみようと思いました。
今回はclipboard.jsを使わずに実装しましたが、いちおう話にでてきたのでそちらも下記にリンク先を載せておきます。
