HTMLで input や textarea にあるものをクリックだけでコピー（クリップボード）したいことは、かなり頻繁にあるよね。
ついでにコピーできたかどうかも、ツールチップで表現すれば完璧かなぁということで、ちょうど今作っている管理ツールに組み込んだついでにひとまず記録。
HTML・CSS・Javascript ソース例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>クリップボードにコピー</title>
<style>
/* ツールチップのスタイル */
.tooltip {
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
.tooltip.show {
opacity: 1;
}
</style>
<script>
// クリップボードコピー関数
function copyToClipboard(element) {
element.select();
document.execCommand('copy');
showTooltip(element);
}
// ツールチップ表示関数
function showTooltip(element) {
const tooltip = document.createElement('div');
tooltip.className = 'tooltip';
tooltip.textContent = 'コピーしました！';
document.body.appendChild(tooltip);
// ツールチップを配置
const rect = element.getBoundingClientRect();
tooltip.style.left = `${rect.left + window.scrollX}px`;
tooltip.style.top = `${rect.bottom + window.scrollY}px`;
tooltip.classList.add('show');
// 3秒後にツールチップ削除
setTimeout(() => {
tooltip.classList.remove('show');
tooltip.remove();
}, 3000);
}
document.addEventListener('DOMContentLoaded', function() {
const copyTargets = document.querySelectorAll('.copy-target');
copyTargets.forEach(input => {
input.addEventListener('click', function() {
copyToClipboard(this);
});
});
});
</script>
</head>
<body>
<h1>クリップボードコピーの例</h1>
<input type="text" value="コピー対象のテキストボックス" class="copy-target">
<textarea rows="4" cols="50" class="copy-target">コピー対象のテキストエリア</textarea>
<input type="text" value="コピー対象ではないテキストボックス">
<textarea rows="4" cols="50">コピー対象ではないテキストエリア</textarea>
</body>
</html>
