N2i ジャーナル

名古屋と東京を拠点に活動するITベンチャー N2i がIT・ビジネス情報をお届けします

名古屋と東京を拠点に活動するITベンチャーN2iがIT・ビジネス情報をお届けします

javascript で「クリップボードにコピー」を実装した時の話

Embed from Getty Images

クリップボードにコピーを実装するとなると、「clipboard.js」っていう便利なものがあるんですけど、これって「<input>」 のテキストかテキストエリアがどうしても必要なんです。

 

今回は、下にあるようなボタンだけを使ってコピーを実装させてみようという試みをした時の記事になります。

 

f:id:n2i-t:20171113101239p:plain

 

結論から言うと、クリップボードにコピーさせるには、テキストを選択させる必要があるので、必ず「<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を使わずに実装しましたが、いちおう話にでてきたのでそちらも下記にリンク先を載せておきます。

developer.mozilla.org

 

clipboard.js — Copy to clipboard without Flash

Powered by はてなブログ