jsはユーザのクリップボードにテキストをコピーする

5112 ワード

webdev beginners javascript tutorial テキストリンク

ウェブサイトをプログラミングするときは、ユーザーのクリップボードにテキストをコピーする必要があります.それはコードの一部をコピーするかどうか、トークン(GiThubのように)、URL、または単にメッセージ.この記事では、バニラJavaScriptでユーザーのクリップボード内の任意のライブラリなしでテキストをコピーする方法が表示されます.

どのような方法を使うべきですか。

これを行うには、JavaScript関数を使用できます.execCommand() . しかし、MDN web docs , この関数はすぐに廃止され、Web標準から削除されます.だからこそ、このチュートリアルでは別のメソッドを使用します.Clipboard.writeText() .
この関数の構文はとても簡単です.

let variable = navigator.clipboard.writeText(‘your text’);

まず、入力の内容をユーザーのクリップボードにコピーする方法を見ます.次に、より複雑な例が表示され、ユーザーがコピーできるコードがいくつかあります.

簡単な例

この例では、ユーザーは入力で希望するテキストを入力し、この目的のために提供されるボタンをクリックすることによってテキストをコピーすることができます.最初のステップは、任意のWebプロジェクトのように、HTMLを設定することです.我々のケースでは、それは非常に簡単です:入力と“コピー”ボタン.

<input type="text" id="textInput" placeholder="Your text">
<button id="copy" content=""  onclick="copyText(event)" ></button>

我々の将来のJavaScriptを予想して、我々は呼び出しますcopyText() 機能は、ユーザーが“コピー”ボタンをクリックします.
次に、JavaScriptを追加する必要があります.

// We select our input 
let input = document.getElementById("textInput");

// Copy the text of the input 
copyText = (e) => {
  // We check that the input is not empty 
  if (input.value.length) {
    // We copy the text it contains into the clipboard 
    navigator.clipboard.writeText(input.value).then(() => {
      // We confirm the action in the console 
      console.log("Text Copied !");
    })
  } else {
    console.log("The input is empty ");
  }
}