この記事では、JavaScriptを使ってコピー機能を実装する方法を学びます。
方法1: シンプルなJavaScriptコードを使用する
私たちはClipboard APIのClipboard.writeText() 或 Clipboard.write()メソッドを使用して、指定したデータでクリップボードの内容を上書きできます。
例
function myFunction() {
/* テキスト内容を取得 */
var copyText = document.getElementById("myInput");
/* コピーする内容を選択 */
copyText.select();
copyText.setSelectionRange(0, 99999); /* モバイルデバイス向けに設定 */
/* テキストエリアに内容をコピー */
navigator.clipboard.writeText(copyText.value);
/* コピーした内容をポップアップ表示 */
alert("コピーしたテキスト: " + copyText.value);
}
/* テキスト内容を取得 */
var copyText = document.getElementById("myInput");
/* コピーする内容を選択 */
copyText.select();
copyText.setSelectionRange(0, 99999); /* モバイルデバイス向けに設定 */
/* テキストエリアに内容をコピー */
navigator.clipboard.writeText(copyText.value);
/* コピーした内容をポップアップ表示 */
alert("コピーしたテキスト: " + copyText.value);
}
試してみる »
コピー完了後、より親しみやすい方法で通知することができます：
例
function myFunction() {
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "コピー内容: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "ボタンをクリックしてコピー";
}
var copyText = document.getElementById("myInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "コピー内容: " + copyText.value;
}
function outFunc() {
var tooltip = document.getElementById("myTooltip");
tooltip.innerHTML = "ボタンをクリックしてコピー";
}
試してみる »
方法2: サードパーティライブラリ clipboard.js を使用する（推奨、互換性が高い）
-
clipboard.js 公式サイト：https://clipboardjs.com/
clipboard.js Github：https://github.com/zenorocha/clipboard.js
clipboard.js をダウンロードしてプロジェクトに導入できます：
<script src="dist/clipboard.min.js.html"></script>
もちろん、さらに簡単なのは中国国内のCDNライブラリを直接使用することです：
<script src="https://cdn.staticfile.org/clipboard.js/2.0.4/clipboard.min.js"></script>
例
new ClipboardJS('#copyInput', {
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("コピー成功！！！");
e.clearSelection();
}).on('error', function(e) {
alert('Error!');
});
text: function(trigger) {
return document.getElementById("myInput").value;
}
}).on('success', function(e) {
alert("コピー成功！！！");
e.clearSelection();
}).on('error', function(e) {
alert('Error!');
});
試してみる »
clipboard.js ブラウザサポート
