HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM クリップボードイベント（ClipboardEvent）とは？基本から実例まで解説

HTML DOM のクリップボードイベントは、クリップボードに対する操作に関する情報を取得・処理するために使用されるイベントです。対象となる操作は「切り取り（cut）」「コピー（copy）」「貼り付け（paste）」の3種類です。

クリップボードイベントを活用すると、「テキストがコピーされました」のように、クリップボードがどのように変更されたかをユーザーへフィードバックできます。これにより、サイトのアクセシビリティやユーザビリティを高めることが可能になります。

クリップボードイベントのプロパティ

クリップボードイベントには、以下のプロパティが用意されています。

プロパティ説明
clipboardDataクリップボード操作（切り取り・コピー・貼り付け）によって影響を受けたデータを含むオブジェクトを返します。

クリップボードイベントの種類

クリップボードイベントには、以下の3つのイベントタイプがあります。

イベント説明
oncopyユーザーが要素内のコンテンツをコピーしたときに発生します。
oncutユーザーが要素内のコンテンツを切り取ったときに発生します。
onpasteユーザーが要素にコンテンツを貼り付けたときに発生します。

構文

クリップボードイベントの基本的な構文は以下のとおりです。

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

第1引数の type には 'cut'、'copy'、'paste' のいずれかを指定します。第2引数は省略可能で、clipboardData、dataType、data などのオプションを含めることができます。

サンプルコード：oncopy イベントの例

ここでは、クリップボードイベントの一つである 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>

実行結果

このコードを実行すると、まず初期状態として次のような画面が表示されます。

HTML DOM クリップボードイベント（ClipboardEvent）とは？基本から実例まで解説

テキストボックス内の文字列をコピーすると、以下のようにメッセージが表示されます。

HTML DOM クリップボードイベント（ClipboardEvent）とは？基本から実例まで解説

コードの解説

この例では、type="text" の <input> 要素を作成しています。ラベルとして「TEXTBOX」が割り当てられ、あらかじめユーザーが選択できるテキストが入力されています。ユーザーがこのテキストをコピーすると、CopyText() メソッドが実行されます。

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

CopyText() メソッドでは、document.getElementById() を使って <p> 要素を取得し、その段落内に「The text has been copied by you!」というメッセージを表示しています。

function CopyText() {
    document.getElementById("Sample").innerHTML = "The text has been copied by you!"
}

同様の仕組みで、oncut や onpaste イベントを使えば、切り取りや貼り付けの操作にも対応できます。クリップボードイベントを適切に組み込むことで、より直感的で分かりやすいインターフェースを実現できるでしょう。

  1. HTML DOMのtouchmoveイベントとは？基本構文とサンプルコードで学ぶタッチ操作

    HTML DOMのtouchmoveイベントは、タッチスクリーン上で指（タッチポイント）が移動している間、継続的に発生するイベントです。指を画面に触れたままスライドさせるたびに何度も発火するため、ドラッグ操作やペイントアプリ、ミニゲームなど、インタラクティブなタッチUIを実装する場面で非常に役立ちます。 ※ 注意：このイベントはスマートフォンやタブレットなどタッチ対応デバイス専用です。マウス操作では発生しないため、動作確認の際はタッチ端末を使用してください。 touchmoveイベントの基本構文 1. HTMLの属性として記述する場合 ontouchmove = "eventFu

  2. HTML DOM Event typeプロパティとは？イベントの種類を取得する方法を実例付きで解説

    HTML DOM Event typeプロパティとはHTML DOMのEvent typeプロパティは、発生したイベントの種類に対応する文字列を返すプロパティです。「click」「keypress」「load」「touchend」など、さまざまなイベントタイプを取得できます。構文イベントの種類を文字列として取得するには、以下のように記述します。event.typeそれでは、Event typeプロパティの具体的な使用例を見ていきましょう。使用例以下のサンプルでは、赤い円形の要素に対して「クリック」または「タッチ」が行われた際に、event.typeでイベントの種類を判定しています。イベントの種