簡単な 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>サンプル
VjBpRLpQkr5GniGG7J5PxUa7CXmZKuzD
2021年9月更新：
従来までは a タグの箇所を <a href=”javascript:clipboard();”> と記述していましたが、これだと Chrome などのエミュレーションでは正しく挙動するのですが、iPhone の実機だと動かないという謎現象に遭遇していました。
いろいろ調べた結果、iPhone 環境ではクリックの処理でいろいろと問題があるらしく、いろいろ特殊なことをしないといけないらしく、結果としては、まず a タグに style=”cursor: pointer;” のスタイルを追加、 a の href 自体には false の戻り値を返す式を、そして新たに onclick= を追加して、そこにクリップボードにコピーをするプログラムを入れたところ、想定通りの挙動になりました。
