Javascriptでクリックした時、要素内文字列をクリップボードにコピーさせる
- 作成日時：
- 最終更新日時：
- Categories： フロントサイド
- Tags： JavaScript tips ウェブデザイン
よく見かける、JavaScriptでクリックした時、コピーするアレを再現する。
ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Hello World test!!</title>
<style>
pre {
background:black;
padding:0.5rem;
overflow:auto;
position:relative;
}
pre code {
color:#0fc;
}
.copy_button{
user-select: none;
display:inline-block;
position:absolute;
top:0;
right:0;
color:white;
background:black;
cursor:pointer;
margin:0.25rem 0.75rem;
padding:0.25rem 0.5rem;
border:solid 0.1rem white;
border-radius:0.5rem;
transition:0.2s;
}
.copy_button:hover{
background:#0fc;
color:black;
}
.copy_button:active{
background:black;
color:white;
}
</style>
</head>
<body>
<pre><code>console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");console.log("HelloWorld");</code></pre>
<script>
const pre_elems = document.querySelectorAll("pre");
// コピー用のボタンを配置する。
for (let pre_elem of pre_elems ){
pre_elem.innerHTML += '<span class="copy_button">Copy</span>';
}
const copy_buttons = document.querySelectorAll(".copy_button");
for (let copy_button of copy_buttons){
copy_button.addEventListener("click" , (event) => {
const code = event.currentTarget.closest("pre").querySelector("code");
if (navigator.clipboard && code){
navigator.clipboard.writeText( code.textContent );
}
});
}
</script>
</body>
</html>
結論
ウェブアプリでコピーして別のウェブアプリのフォームにペーストしたい時、URLなどの長くて打ち損じやすい文字列をコピペさせる時などに有効。
ちなみに、このクリップボードのコピー機能を実装しようと思いたったのが2021年4月。あまり先送りにするのは戒めようとつくづく思った。
このブログにも実装しておいた。