◇htmlにテキストブロックコピー機能
htmlにテクストブロックコピーを入れる
次のような記述
<div class="code-container">
<button class="copy-button" data-target="code-block">コピー</button>
<pre id="code-block" style="font-size: 12px;"><code>
ここに複数行のテキストを書く。
ただし、<は&lt;,&は&amp;とエスケープする必要がある。
</code></pre></div>
で次の表示が得られます。コピーで
ここに複数行のテキストを書く。
ただし、<は<,&は&とエスケープする必要がある。
[コピー]ボタンを押すと、テキストがコピーされます。
ここに複数行のテキストを書く。 ただし、<は<,&は&とエスケープする必要がある。
実装
本文の前後にjavascriptとcssを配置し、実装されます。
前方に<style>と<script>ブロック、後方に<script>ブロックを置いています。
HTML全文を載せます。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>テキストブロックコピー</title>
<style>
.code-container {
position : relative;
margin : -10px 0;
}
pre code {
display : block;
padding : 10px;
background-color: #2d2d2d;
color : #f8f8f2;
border : 1px solid #555;
border-radius : 4px;
font-family: Consolas, "Courier New", monospace;
overflow-x : auto;
margin-top : 0px;
}
.copy-button {
position : absolute;
top : 5px;
right : 10px;
background-color: #4CAF50;
color : white;
padding : 5px 10px;
border : none;
border-radius : 5px;
cursor : pointer;
}
.copy-button:hover {
background-color: #45a049;
}
</style>
<script>
function hi_copyCode(button) {
var targetId = button.getAttribute('data-target');
var code = document.getElementById(targetId).innerText;
if (navigator.clipboard && navigator.clipboard.writeText) {
// clipboard APIを使用する
navigator.clipboard.writeText(code).then(() => {
alert("コードがコピーされました！");
}).catch(err => {
alert("クリップボードへの書き込みに失敗しました。");
});
}
else {
// フォールバック: execCommandを使用してコピーする
var textarea = document.createElement("textarea");
textarea.value = code;
document.body.appendChild(textarea);
textarea.select();
try {
document.execCommand('copy');
alert("コードがコピーされました！（フォールバック）");
}
catch (err) {
alert("クリップボードへの書き込みに失敗しました。（フォールバック）");
}
document.body.removeChild(textarea);
}
}
</script>
</head>
<body>
<!-- **************************** -->
<div class="code-container">
<button class="copy-button" data-target="code-block">コピー</button>
<pre id="code-block" style="font-size: 12px;"><code>
ここに複数行のテキストを書く。
ただし、<は&lt;,&は&amp;とエスケープする必要がある。
</code></pre></div>
<!-- **************************** -->
<script>
document.querySelectorAll('.copy-button').forEach(button => {
button.addEventListener('click', function() {
hi_copyCode(this);
});
});
</script>
</body>
</html>
本ブログでの実装（メモ)
本ブログ（万象酔歩）では前段の定義を
http://k-hiura.cocolog-nifty.com/blog/files/hienv.jsに、後段の定義を
http://k-hiura.cocolog-nifty.com/blog/files/hienv2.jsに置いており、<body>部の本文前に次のようにして参照しています。(COCOLOGの都合により<headr>部に置いていない）
<body> <script type="text/javascript" src="http://k-hiura.cocolog-nifty.com/blog/files/hienv.js" charset="UTF-8"></script> <p>ブログ本文</p> <div class="code-container"> <button class="copy-button" data-target="code-block">コピー</button> <pre id="code-block" style="font-size: 12px;"><code> ここに複数行のテキストを書く。 ただし、<は&lt;,&は&amp;とエスケープする必要がある。 </code></pre></div> <script type="text/javascript" src="http://k-hiura.cocolog-nifty.com/blog/files/hienv2.js" charset="UTF-8"></script> </body>
| 固定リンク