HTMLの貼り付けイベント属性
HTML onpaste属性は、ユーザーがHTMLドキュメントのHTML要素にコンテンツを貼り付けるとトリガーされます。
構文
以下は構文です-
<tagname onpast=”script”></tagname>
HTMLの貼り付けイベント属性の例を見てみましょう-
例
<!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イベント属性がどのように機能するかを観察します-
-
HTMLondragstartイベント属性
HTML ondragstartイベント属性は、ユーザーがHTML要素またはHTMLドキュメント内の要素のテキストのドラッグを開始したときにトリガーされます。 構文 以下は構文です- <tagname ondragstart=”script”></tagname> HTMLのondragstartイベント属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> body { co
-
HTMLオンドロップイベント属性
HTML ondropイベント属性は、ドラッグ可能な要素またはテキストがHTMLドキュメントの有効なドロップターゲットにドロップされたときにトリガーされます。 構文 以下は構文です- <tagname ondrop=”script”></tagname> HTMLオンドロップイベント属性の例を見てみましょう- 例 <!DOCTYPE html> <html> <head> <style> body { color: #000;