HTMLDOMクリップボードイベント
HTML DOMクリップボードイベントは、クリップボードの変更に関する情報を提供するために使用されます。イベントは切り取り、コピー、貼り付けが可能です。クリップボードイベントを使用すると、サイトをよりアクセスしやすくすることができます。つまり、クリップボードがどのように変更されているかに関する情報をユーザーに提供できます。
プロパティ
以下はクリップボードイベントのプロパティです-
| プロパティ | 説明 |
|---|---|
| clipboardData | クリップボード操作（切り取り、コピー、または貼り付け）の影響を受けるデータを含むオブジェクトを返すため。 |
イベント
クリップボードイベントに属するイベントタイプは次のとおりです-
| イベント | 説明 |
|---|---|
| oncopy | このイベントは、要素のコンテンツがユーザーによってコピーされたときに発生します。 |
| オンカット | このイベントは、ユーザーが要素のコンテンツを切り取ったときに発生します |
| 貼り付け | このイベントは、ユーザーが要素にコンテンツを貼り付けたときに発生します |
構文
以下はクリップボードイベントの構文です-
var clipboardEvent = new ClipboardEvent(type,[options]);
ここで、タイプは「カット」、「コピー」、または「貼り付け」にすることができ、2番目のパラメーターはオプションです。 2番目のパラメーターには、clipboardData、dataType、およびdataが含まれます。
例
クリップボードイベントの1つの例をオンコピーで見てみましょう-
<!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> 出力
これにより、次の出力が生成されます-
TEXTBOX内のテキストのコピーについて-
上記の例では-
テキスト型の要素を作成しました。ラベルTEXTBOXが割り当てられており、ユーザーが選択できるようにすでにテキストが含まれています。ユーザーがテキストをコピーすると、CopyText（）メソッドが実行されます。
<label> TEXTBOX <input type="text" oncopy="CopyText()" value="Copy this text">
CopyText（）メソッドは、ドキュメントのgetElementById（）メソッドを使用して
要素を取得し、段落内に「テキストはあなたによってコピーされました！」と表示します。
function CopyText() {
document.getElementById("Sample").innerHTML = "The text has been copied by you!"
} -
HTMLDOMtouchmoveイベント
HTML DOM touchmoveイベントは、タッチがタッチスクリーン上を移動したときにトリガーされます。 注 −このイベントはタッチデバイスのみを対象としています。 以下は構文です- HTMLでtouchmoveイベントをトリガーする- ontouchmove = "eventFunction()" JavaScriptでtouchmoveイベントをトリガーする- eventObject.ontouchmove = eventFunction 注 −モバイルまたはタッチアクセスのあるシステムでアクセスされるオンラインHTMLエディターでタッチイベントの例を実行しま
-
HTMLDOMイベントタイププロパティ
HTML DOMイベントタイププロパティは、クリック、キープレス、ロード、タッチエンドなどのイベントのタイプに対応する文字列を返します。 以下は構文です- トランジションが実行された秒数を返す- event.type イベントタイプの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Event type</title> <style> form { width:70%;