簡単な JavaScript で HTML の表示要素をクリップボードにコピーする(iPhone 対応、脱 JQuery)

例えばプロダクトキーや API キーなど、長くて複雑な文字列を、訪問者に提供している場合、この機能を提供することで、訪問者のクリップボードに文字列をコピーして、その後はペーストだけすればよい、という形で利便性を高めることができます。

JavaScript で記述していますので、脱 JQuery / 非 JQuery を望まれる方にもご利用いただけます。

HTML

<p id="campaign-code">VjBpRLpQkr5GniGG7J5PxUa7CXmZKuzD</p>
<p><a href="javascript:void(0);" onclick="javascript:clipboard();" style="cursor: pointer;"><i class="fa fa-clipboard" aria-hidden="true"></i> <span id="clipboard-info">コードをクリップボードにコピーする</span></a></p>

JavaScript

 <script>
 function clipboard(){
   var text = document.getElementById('campaign-code').innerText;
   navigator.clipboard.writeText(text).then(e => {
     document.getElementById("clipboard-info").innerText = "コピーしました.";
   });
 }
 </script>

サンプル

2021年9月更新：

従来までは a タグの箇所を <a href=”javascript:clipboard();”> と記述していましたが、これだと Chrome などのエミュレーションでは正しく挙動するのですが、iPhone の実機だと動かないという謎現象に遭遇していました。

いろいろ調べた結果、iPhone 環境ではクリックの処理でいろいろと問題があるらしく、いろいろ特殊なことをしないといけないらしく、結果としては、まず a タグに style=”cursor: pointer;” のスタイルを追加、 a の href 自体には false の戻り値を返す式を、そして新たに onclick= を追加して、そこにクリップボードにコピーをするプログラムを入れたところ、想定通りの挙動になりました。