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キーで判定

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

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

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

AWS SESの受信メールを暗号化してs3に保存しLambdaで読み込む

jsの場合、複合処理を独自実装する必要がある

RaspberryPi ZeroにNode.jsの最新版をインストールする

vercel/install-nodeを使うと手軽にインストールできた