【javascript】テキストをコピーするクリップボード(clipboard) APIの使い方
execCommandは非推奨
execCommandはまだ使えるけど、これから使えなくなるかも。
document.execCommand("copy");
クリップボードAPIの書き方
以下のように記述すれば、ページが読み込まれたときに、「copy」とコピーされます。
navigator.clipboard.writeText("copy")以下は、inputの内容をコピーします。入力してボタンを押してみてください。
<div class="input-container">
<input type="text" id="copyText" placeholder="入力してください。" />
<button onclick="copyToClipboard(this)">
Copy Text
</button>
</div>ボタンをクリックしたら、ボタンの前の要素(input)の値を取得するようにしています。
async function copyToClipboard(obj) {
const element = obj.previousElementSibling;
// クリップボードAPIが使え、且つ、値が空でない時
if (navigator.clipboard && !element.value == false) {
await navigator.clipboard.writeText(element.value);
alert("コピーされました！");
} else {
alert("コピーされませんでした！");
}
}参考
【javascript】親要素、子要素、兄弟要素を取得する
【javascript】onclickの書き方と使い方 クリックした値を取得する
コピーされたかの判定
先ほどのコードでは、コピーされたかの判定がalertで表示され、 OKを押すのがめんどくさいので、 以下のように、ボタンの部分に表示させるようにしました。
async function copyToClipboard(obj) {
// 兄要素を取得
const element = obj.previousElementSibling;
if (navigator.clipboard && !element.value == false) {
await navigator.clipboard.writeText(element.value);
obj.textContent = "Copied";
obj.style = "background: blue;";
setTimeout(resetBtn, 2000);
} else {
obj.textContent = "Could not copy!";
obj.style = "background: red; font-size: 14px";
setTimeout(resetBtn, 2000);
}
function resetBtn() {
obj.textContent = "Copy Text";
obj.style = "background: #533eff;";
}
}
value以外の値を取得
inputやtextarea などの値はvalueで取得しますが、その他の要素はtextContentで取得します。
吾輩は猫である。名前はまだ無い。どこで生れたか頓（とん）と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
さっきとの変更点
async function copyToClipboard(obj) {
const element = obj.previousElementSibling;
if (navigator.clipboard && !element.textContent == false) {
await navigator.clipboard.writeText(element.textContent);
obj.textContent = "Copied";
obj.style = "background: blue;";
setTimeout(resetBtn, 2000);
} else {
obj.textContent = "Could not copy!";
obj.style = "background: red; font-size: 14px";
setTimeout(resetBtn, 2000);
}
}まとめ
- execCommandは非推奨
- navigator.clipboard.writeText(コピーされる内容);
- inputやtextarea等はvalueを取得。その他は、textContentを使う。
