HTMLのonpasteイベント属性とは？構文とサンプルコードで解説
HTMLのonpasteイベント属性は、ユーザーがHTMLドキュメント内の要素に対してコンテンツを貼り付け（ペースト）した瞬間に発火するイベント属性です。テキストエリアや入力フィールドなど、貼り付け操作が行われる可能性のある要素に設定することで、そのタイミングに合わせて任意のスクリプトを実行できます。
基本構文
onpasteイベント属性の基本的な書き方は以下のとおりです。
<tagname onpaste="script"></tagname>
実装例
ここでは、onpasteイベント属性を使った具体的なサンプルを見ていきましょう。以下のコードでは、テキストエリアにコンテンツが貼り付けられたタイミングで、背景色が白色に変わるようにJavaScript関数を呼び出しています。
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
padding: 20px;
}
p {
border: 2px solid #fff;
padding: 8px;
text-align: justify;
}
textarea {
border: 2px solid #fff;
background: transparent;
font-size: 1rem;
}
::placeholder {
color: #000;
font-size: 1rem;
}
</style>
</head>
<body>
<h1>HTML onpaste Event Attribute Demo</h1>
<p>
I'm a paragraph element with some dummy text.
I'm a paragraph element with some dummy text.
I'm a paragraph element with some dummy text.
I'm a paragraph element with some dummy text.
I'm a paragraph element with some dummy text.
</p>
<textarea placeholder="Paste above text here" onpaste="pasteFn()" rows='8' cols="50" required></textarea>
<script>
function pasteFn() {
document.querySelector('textarea').style.background = '#fff';
}
</script>
</body>
</html>
表示結果
ブラウザでページを開いたら、段落内のダミーテキストをコピーし、テキストエリアに貼り付けてみてください。貼り付けの瞬間にonpasteイベントが発火し、テキストエリアの背景色が変化する様子を確認できます。
-
HTMLのondragstartイベント属性とは？使い方とサンプルコードを解説
HTMLのondragstartイベント属性は、ユーザーがHTML要素や要素内のテキストのドラッグ操作を開始した瞬間に発火するイベント属性です。ドラッグ＆ドロップ機能を実装する際に、ドラッグ開始時の処理（データの設定やメッセージ表示など）を定義するために使用されます。構文ondragstartイベント属性の基本的な構文は以下のとおりです。<tagname ondragstart=script></tagname>ondragstartイベント属性の使用例ここでは、赤い円をドラッグすると「ドラッグを開始しました」というメッセージが表示され、ドラッグが終わると別のメッセージ
-
HTMLのondropイベント属性とは？使い方をサンプルコードで解説
HTMLのondropイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップ先（ターゲット）にドロップされた瞬間に発火するイベント属性です。ドラッグ＆ドロップ操作を実装する際には、ondragstartやondragoverなどのイベント属性と組み合わせて使用されるのが一般的です。 構文 ondropイベント属性の基本的な構文は以下の通りです。 <tagname ondrop="script"></tagname> 属性値には、ドロップされたときに実行したいJavaScriptのコードまたは関数名を指定します。 サンプ