HTMLのoncutイベント属性とは？使い方とサンプルコードを徹底解説
HTMLのoncutイベント属性は、ユーザーがHTMLドキュメント内の要素の内容を切り取り（カット）した瞬間に発生するイベント属性です。テキストなどがクリップボードへ切り取られる動作を検知し、指定したJavaScriptスクリプトを実行することができます。
基本構文
oncutイベント属性の基本的な書き方は以下の通りです。
<tagname oncut="script"></tagname>
「script」の部分には、切り取り操作が行われたときに実行したいJavaScriptのコードまたは関数名を記述します。
使用例
それでは、HTML oncutイベント属性の具体的な使用例を見ていきましょう。以下のサンプルでは、段落要素のテキストが切り取られたタイミングで、ページの背景色が変化する仕組みを実装しています。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
p {
font-size: 1.1rem;
}
</style>
</head>
<body>
<h1>HTML oncut Event Attribute Demo</h1>
<p oncut="get()">I'm a paragraph HTML element with some dummy text.</p>
<p style="color:#db133a;">Now try to cut above paragraph text.</p>
<div class="show"></div>
<script>
function get() {
document.body.style.background = "lightblue";
}
</script>
</body>
</html>
コードのポイント
- 段落要素に対して
oncut="get()"を指定しています。 - テキストが切り取られると、
get()関数が呼び出されます。 get()関数内では、document.body.style.backgroundを書き換えることで背景色を「lightblue」に変更しています。
実行結果
上記のコードをブラウザで開くと、グラデーション背景のページが表示されます。
次に、段落要素のテキストを実際にドラッグして切り取ってみましょう。oncutイベントが発火し、ページ全体の背景色が水色に変化することを確認できます。
まとめ
oncutイベント属性を使うことで、ユーザーによる切り取り操作を簡単に検知できます。コピーを検知するoncopy、貼り付けを検知するonpasteといった関連イベント属性と組み合わせれば、クリップボード操作全般に対応したインタラクティブなWebページを構築することも可能です。
-
HTML ondragendイベント属性の使い方を徹底解説
ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q
-
HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説
HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード