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>

Related #js

Next.jsのPreview Mode時はAnalyticsを無効化する

cookieの__next_preview_dataキーで判定

next.jsにtailwindcssを導入する

VSCodeのTailwind CSS IntelliSense拡張が便利

Alexaに気温と二酸化炭素濃度を教えてもらう

「Alexa、気温」でセンサー情報を教えてくれるようになった

ESLintでimport文を自動で並べ替える

eslint-plugin-simple-import-sortを使う