テーマ
まいどおおきに！！naoto555です。
クーポンコードや商品の型式などをコピーして別の場所に貼り付けたいな…なんてことたまにありますよね。
パソコンならまだいいですが、スマフォやタブレットの場合だと該当部分をうまく選択してコピーするのがとても面倒くさいと感じてしまいます。選択範囲が足りなかったり、行き過ぎてしまったりいつも四苦八苦ですｗ
そんなとき、ボタンをクリックしただけでコピーできればとても便利ですよね。
本日はJavaScriptを使って特定のテキストをクリップボードにコピーする方法について解説していきたいと思います。
完成図
コピーしたい文章
ソースコード(html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p id="text">コピーしたい文章</p>
<button id="button">COPY</button>
</body>
<script type="text/javascript">
var btn = document.getElementById("button"); // button要素取得
var txt = document.getElementById("text").textContent; // コピーしたい文章を取得
btn.addEventListener('click', function() { // ボタンをクリックしたら
navigator.clipboard.writeText(txt);
confirm(`クリップボードにテキストをコピーしました。\n`);
}, false);
</script>
</html>※完成図ではワードプレス上で動かすのと、見栄えを少し良くするためにコードとデザインの小変更をしてます。
解説
以前は、execCommand()というコマンドを使って、コピー機能を実現していたのですが、2022年11月現在では、この方法は非推奨となっています。
まだ対応しているブラウザもありますが、互換性のためだけに残されているといった状況で気づいたら使えなくなっているという可能性もあります。
なので、今回は「sync Clipboard API」というものを使った方法をご紹介します。
なんか難しそうな名前ですが、コピペするための機能が一式セットになったものです。（これを書いておけば、勝手にクリップボードにコピーしてくれます。）
使い方も簡単で、navigator.clipboardでAPI(コピペ機能)を呼び出した後に、writeText()メソッドを呼び出します。writeText()のカッコの中身がクリップボードに書き込まれます。
//document.getElementById("text").textContentつまり、
// <p id="text">コピーしたい文章</p>の中身がコピーされます。
navigator.clipboard.writeText(txt);終わりに
クリップボードにコピーする機能はとても便利ですよね。
私の場合、よく使うLinuxコマンドの表を作って、ボタンでコマンドをコピーして、
そのままターミナルに貼り付けたりできるようにとかしてます。
上手く使えば時短や利便化ができるとても便利な機能だ思いますので是非ご利用下さいませ。
それでは、ごきげんよう！