jsでクリップボードにコピーするボタンを実装する
inputフォームの内容をコピーする際に、コピーボタンを押したらクリップボードにコピーできるようにしたかったので対応方法を調べた。
IEをサポートしなくて良い環境だったので、「Clipboard.writeText()」を使うと手軽に対応できた。
<body>
<input readonly id="copy" type="text" value="something long text" />
<button onclick="copyToClipboard()">
Copy to Clipboard
</button>
<script type="text/javascript">
const copyToClipboard = () => {
const textarea = document.getElementById("copy");
navigator.clipboard.writeText(textarea.value).then(() => {
console.log("copied");
});
};
</script>
</body>