2022・07・14
＊ボタンをクリックするとテキストがクリップボードにコピーされるサンプルです＊
JavaScriptのnavigator.clipboard.writeText()を使って、テキストをクリップボードにコピーさせるプログラムです。
コピーが完了したことを示すため、簡単なCSSアニメーションもつけてみました。
クリックした瞬間に「Copied！（コピー完了）」の表示に切り替わるとやや不自然になるため、setTimeout()で、少し時間差をつけているのもポイントです。
【 CSS・JavaScript 】
https://web-de-asobo.net/
上記のサンプルコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。（※スクロールできます）
HTML・CSS・JavaScript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>copy</title>
<style>
.sample_address_container {
width: fit-content;
margin: 130px auto;
display: grid;
justify-content: center;
align-content: center;
}
.sample_address {
display: flex;
column-gap: 20px;
align-items: center;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-style: normal;
}
.copy_bt {
width: 80px;
border: none;
background-color: black;
color: white;
text-align: center;
height: 2rem;
padding: .5rem 1rem 1.6rem 1rem;
transition: .3s;
cursor: pointer;
font-size: 1rem;
border-radius: 20px;
position: relative;
transition: .4s;
}
.copy_bt::before {
content: '';
position: absolute;
width: .5rem;
height: .8rem;
border-bottom: solid 2px black;
border-right: solid 2px black;
transform: rotate(45deg);
top: .5rem;
left: 1rem;
opacity: 0;
}
.copy_bt::after {
content: '';
position: absolute;
width: 1rem;
height: 1rem;
top: .7rem;
left: .9rem;
background-image: linear-gradient(90deg, white, white);
visibility: hidden;
transform-origin: right;
}
.copy_bt:hover {
opacity: .8;
}
.copy_bt.complete {
background-color: white;
color: black;
width: 100px;
border: solid 1px black;
padding-left: 2rem;
}
.copy_bt.complete::before {
animation: bt_anime_before .4s forwards 1 linear;
animation-delay: .5s;
}
@keyframes bt_anime_before {
0% {
opacity: 0;
}
10%, 100% {
opacity: 1;
}
}
.copy_bt.complete::after {
animation: bt_anime_after .4s forwards 1 linear;
animation-delay: .5s;
}
@keyframes bt_anime_after {
from {
visibility: visible;
transform: scaleX(1);
}
to {
transform: scaleX(0);
}
}
}
</style>
</head>
<body>
<div class="sample_address_container">
<address class="sample_address">
<p class="hp_url">https://web-de-asobo.net/</p>
<button class="copy_bt">copy</button>
</address>
</div>
<script>
{
const copyBt = document.querySelector('.copy_bt');
const hpURL = document.querySelector('.hp_url').textContent;
copyBt.addEventListener('click', () => {
navigator.clipboard.writeText(hpURL);
copyBt.classList.add('complete');
setTimeout ( () => {
copyBt.textContent = 'copied!';
}, 500);
});
}
</script>
</body>
</html>