Skip to main content
Categories
フロントエンド・フレームワークポートフォリオ中級の学習学習

クリップボードAPIを使ってみました

  • Post Author
    By pitang1965
  • Post Date
    Wed Sep 09 2020
clipboard

概要

次のようにAmazonのアフィリエイト・リンクのコードをAmazonのページからクリップボード経由でコピー&ペーストし、それらを合成した結果をクリップボードに格納する小さなWebアプリケーションを作成しました。

操作デモ

これをおこなうためのコードの断片を紹介します。全体はGitHubにあります。

クリップボードからのコピー

  const handlePasteFromClipboard = async () => {
    try {
      const text = await navigator.clipboard.readText();
      setLink(text);
    } catch (err) {
      alert('Failed to read clipboard contents: ', err);
    }
  };

クリップボードへのコピー

  const handleCopyToClipboard = async () => {
    try {
      await navigator.clipboard.writeText(code);
   } catch (err) {
      console.error('Failed to copy: ', err);
   }
  };