この記事では、JavaScriptを使用して特定の文章をクリックでコピーする方法を学びます。これにより、ユーザーエクスペリエンスを向上させ、情報の共有を容易にします。以下の手順に従って、簡単に実装できます。
クリックでコピーできる文章です。
次の入力ボックスに貼り付けてみてください。
必要なHTML構造の作成
まず、クリックしてコピーしたい文章を含むHTML要素を作成します。その要素には、data-copy属性を追加して、コピー可能であることを示します。
<p data-copy>クリックでコピーできる文章です。</p>また、Font Awesomeのアイコンを使用して、コピー可能な要素であることを視覚的に示すこともできます。
<p data-copy>クリックでコピーできる文章です。 <i class="fas fa-copy"></i></p>JavaScriptコードの実装
次に、JavaScriptコードを作成し、data-copy属性がある要素をクリックすると、その要素のテキストがコピーされるようにします。以下のコードを使用して、クリックイベントリスナーを追加し、コピー処理を実行できます。
document.querySelectorAll('[data-copy]').forEach(function(element) {
element.addEventListener('click', function() {
const textToCopy = this.textContent;
const textarea = document.createElement('textarea');
textarea.value = textToCopy;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
});
});コピー成功時のフィードバック
最後に、コピーが成功したことをユーザーに知らせるために、短いフィードバックメッセージを表示する機能を追加します。この例では、コピー成功時に「コピーしました」というメッセージを一時的に表示します。
document.querySelectorAll('[data-copy]').forEach(function(element) {
element.addEventListener('click', function() {
const textToCopy = this.textContent;
const textarea = document.createElement('textarea');
textarea.value = textToCopy;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
const feedback = document.createElement('span');
feedback.innerText = 'コピーしました';
feedback.style.position = 'absolute';
feedback.style.backgroundColor = '#333';
feedback.style.color = '#fff';
feedback.style.padding = '5px';
feedback.style.borderRadius = '5px';
feedback.style.opacity = '0';
feedback.style.transition = 'opacity 0.5s';
this.appendChild(feedback);
setTimeout(function() {
feedback.style.opacity = '1';
}, 100);
setTimeout(function() {
feedback.style.opacity = '0';
setTimeout(function() {
feedback.remove();
}, 500);
}, 2000);
});
});これで、クリックで特定の文章をコピーする機能が実装できました。この機能は、ユーザーにとって便利であるだけでなく、ウェブサイトのエンゲージメントを向上させることが期待できます。
ボタンを利用する場合
もしボタンでコピーしたいなら、下のサンプルコードを参考してください。（CSSスタイルなしで、最もシンプルのデザインです。）
<input type="text" value="コピーしたい内容" id="myInput">
<button onclick="myFunction()">コピー</button>
<p>次の入力ボックスに貼り付けてみてください</p>
<textarea></textarea>
<script>
function myFunction() {
/* テキスト内容を取得 */
var copyText = document.getElementById("myInput");
/* コピーする内容を選択 /
copyText.select();
copyText.setSelectionRange(0, 99999); / *テキスト要素の全ての内容を選択範囲に含めること */
/* テキスト領域にコピーした内容を貼り付け */
navigator.clipboard.writeText(copyText.value);
/* コピーされた内容をポップアップで表示 */
alert("コピーされたテキスト: " + copyText.value);
}
</script>ボタンをクリックすると、入力ボックス内のテキストがコピーされます。その後、テキスト（ctrl+v）を貼り付けて効果を確認してください。
次の入力ボックスに貼り付けてみてください。
まとめ
この記事では、JavaScriptを使用してクリックで特定の文章をコピーする方法を学びました。手順は以下の通りです。
- HTML要素に
data-copy属性を追加し、コピー可能な要素を作成します。 - JavaScriptコードを実装して、
data-copy属性がある要素をクリックすると、その要素のテキストがコピーされるようにします。 - コピー成功時にフィードバックメッセージを表示する機能を追加します。
この方法を使用して、ウェブサイトのユーザーエクスペリエンスを向上させ、情報共有を容易にできます。応用範囲は広く、さまざまなウェブサイトやアプリケーションで活用できます。
コメント