管理している同盟ページ「サイトカスタムおもろい!」で使用したボタンのコードです。
ボタンを押すと現在のページのURLをクリップボードにコピーできるようになっています。
さらに、コピーができると上に「コピーできました!」というメッセージを表示するようになっています。
コードをほとんどそのまま使っているボタンです。表示(特にフキダシの位置)がずれていますが、ボタンを押すとURLのコピーができます。
HTML
<div style="position: relative; display: inline-block;">
<span id="copyMessage">
</span>
<button onclick="copyToClipboard()">URLをコピー</button></div>
ボタンを設置したい場所に上のコードをコピペします。
JavaScript
function copyToClipboard() {
var url = window.location.href;
var messageElem = document.getElementById("copyMessage");
navigator.clipboard.writeText(url).then(function() {
// 成功メッセージ
showMessage(messageElem, "コピーできました!");
}).catch(function() {
// 失敗メッセージ
showMessage(messageElem, "コピーに失敗しました");
});
}
function showMessage(element, text) {
element.textContent = text;
element.classList.add("block");
setTimeout(function() {
element.classList.remove("none");
}, 2000);
}
同盟ページではJavaScriptファイルを別途作るのが面倒なので、HTMLの</body>の直前に直接書きこみました。
CSS
button {
font-weight: 700;
color: #ffffff;
background-color: #33B8B3;
width: 120px;
padding: 7px;
border-radius: 5px;
border-style: none;
margin-left: 20px;
text-align: center;
display: inline-block;
}
#copyMessage {
display: none;
position: absolute;
top: -30px;
left: 30px;
background-color: #2b2b2b;
color: white;
padding: 5px 10px;
border-radius: 5px;
font-size: 8px;
width: 80px;
text-align: center;
}
#copyMessage::after {
content: '';
position: absolute;
bottom: -5px; /* メッセージの下に配置 */
left: 50%; /* 配置を調整 */
width: 0;
height: 0;
border-style: solid;
border-width: 5px 3px 0 3px; /* 三角形のサイズ */
border-color: #2d2b2b transparent transparent transparent; /* 吹き出し色と透明色 */
}
上からボタン、「コピーできました!」メッセージのフキダシ、フキダシの下に表示するしっぽのスタイルを指定しています。
ボタンにclassを指定していないので、同一ページ内でほかにボタンを使用している場合はclassなどを指定するといいと思います。
また、しっぽの位置はかなり無理やり指定しているので、ほかの数値をいじると簡単にずれてしまうため注意が必要です。
以上です。お疲れさまでした。