ホームページ > 記事 > ウェブフロントエンド > HTML DOM クリップボードイベント

HTML DOM クリップボードイベント

王林転載: 2023-09-23 16:13:01959ブラウズ

HTML DOM クリップボードイベントは、クリップボードの変更に関する情報を提供するために使用されます。イベントは切り取り、コピー、ペーストできます。クリップボードイベントを使用すると、クリップボードがどのように変更されたかに関する情報をユーザーに提供することで、Web サイトへのアクセスを容易にすることができます。

プロパティ

次は、クリップボードイベントのプロパティです。

##プロパティ説明##clipboardData#イベント


クリップボード操作 (切り取り、コピー、または貼り付け) の影響を受けるデータを含むオブジェクトを返します。

次は、クリップボードイベントに属するイベントタイプです。

#イベントDescriptiononcopyこのイベントは、ユーザーが要素のコンテンツをコピーするとトリガーされます。 Oncutこのイベントは、ユーザーが要素のコンテンツを切り取るとトリガーされます。 onpasteこのイベントは、ユーザーが要素にコンテンツを貼り付けるとトリガーされます。構文

次はクリップボードイベントの構文です。-

var clipboardEvent = new ClipboardEvent(type,[options]);

ここでは、タイプは「カット」、「コピー」です。または「貼り付け」の場合、2 番目のパラメータはオプションです。 2 番目のパラメーターには、ClipboardData、dataType、および data が含まれます。

Example

クリップボードイベントの 1 つの例を見てみましょう oncopy -

<!DOCTYPE html>
<html>
<body>
<form>
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
</label>
</form>
<p id="Sample"></p>
<script>
   function CopyText() {
      document.getElementById("Sample").innerHTML = "The text has been copied by you!"
   }
</script>
</body>
</html>

Output

これにより、次の出力が生成されます-

TEXTBOX 内のテキストをコピーするとき − HTML DOM Clipboard事件

上記の例では、- HTML DOM Clipboard事件

型 An を作成します。テキストの d5fd7aea971a85678ba271703566ebfd 要素。これには TEXTBOX タグが割り当てられており、ユーザーが選択できるテキストがすでに含まれています。ユーザーがテキストをコピーした後、CopyText() メソッドが実行されます。

<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">

CopyText() メソッドは、ドキュメントの getElementById() メソッドを使用して

要素を取得し、段落内に「テキストをコピーしました!」と表示します。

えええええ

以上がHTML DOM クリップボードイベントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html 对象事件 dom input

声明：

この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：HTML ページにビデオを追加するにはどうすればよいですか?次の記事：HTML ページにビデオを追加するにはどうすればよいですか?

続きを見る

HTML DOM クリップボード イベント

プロパティ

var clipboardEvent = new ClipboardEvent(type,[options]);

<!DOCTYPE html> <html> <body> <form> <label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text"> </label> </form> <p id="Sample"></p> <script> function CopyText() { document.getElementById("Sample").innerHTML = "The text has been copied by you!" } </script> </body> </html>

関連記事

HTML DOM クリップボードイベント