簡単な JavaScript で HTML の表示要素をクリップボードにコピーする

簡単な JavaScript で HTML の表示要素をクリップボードにコピーする

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

HTML
<p id="campaign-code">VjBpRLpQkr5GniGG7J5PxUa7CXmZKuzD</p>
<p><a href="javascript:clipboard();"><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>
サンプル

VjBpRLpQkr5GniGG7J5PxUa7CXmZKuzD

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