JavaScriptのpasteイベントについて書いています。
pasteイベントを使うと、ユーザーが貼り付け処理を行ったときに内容を取得して動作したり、独自の処理ができます。
下記について説明しています。
・pasteイベントの設定方法
・pasteイベントでペーストを禁止する
pasteイベントとは？
pasteイベントは、ユーザーがコピーしたテキストやデータを入力フィールドなどに貼り付けた際に発生します。
これにより、貼り付けられたデータを取得したり、貼り付けを制御することができます。
pasteイベントを設定する
pasteイベントを設定する方法は2つです。
- DOMの属性(
onpaste)を直接使用する方法 addEventListenerメソッドを使う方法
DOMの属性を使って設定する
onpaste属性を使うことで、テキストを貼り付けたときにpasteイベントで処理をすることができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>onpaste サンプル</title>
</head>
<body>
<textarea id="textArea" onpaste="handlePaste(event)" rows="4" cols="30"></textarea><br />
<div id="pasteText"></div>
<script>
function handlePaste(event) {
const pastedData = event.clipboardData.getData("text");
const pasteText = document.querySelector("#pasteText");
pasteText.innerHTML = pastedData;
}
</script>
</body>
</html>
HTMLの解説
bodyタグの配下にtextareaタグ(#textArea)と、貼り付けた内容を表示するdivタグ(#pasteText)を用意しています。
テキストエリアに文字列を貼り付けると、onpaste属性に設定しているhandlePaste関数が動作します。
そして、divタグ(#pasteText)に貼り付けた値を表示します。
JavaScriptの解説
handlePaste関数の処理についてです。
最初に引数で受け取ったevent変数を使って、「event.clipboardData.getData("text")」としています。
これで、貼り付けたデータが取得できます。取得したデータはpastedData変数に格納します。
次にdivタグ(#pasteText)を取得して、innerHTMLプロパティに取得したデータを代入することで内容として表示しています。
動作確認
実際に動作を確認すると、下記のようにテキスト貼り付けた際に表示されることが確認できました。
表示されるのは、フォーカスをあてて、貼り付けた初回だけです。(テキストエリアで複数回ペーストしても発生しなかったです)
addEventListenerを使ってイベントを設定する
addEventListenerメソッドを使って、pasteイベントを設定します。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>onpaste サンプル</title>
</head>
<body>
<textarea id="textArea" rows="4" cols="30"></textarea><br />
<div id="pasteText"></div>
<script>
window.onload = () =>
{
const textArea = document.querySelector("#textArea");
textArea.addEventListener("paste", function(event) {
const pastedData = event.clipboardData.getData("text");
const pasteText = document.querySelector("#pasteText");
pasteText.innerHTML = pastedData;
});
}
</script>
</body>
</html>
HTMLの解説
先ほどと同様に、テキストエリア(#textArea)と表示するdiv(#pasteText)を用意しています。
addEventListenerを使うため、テキストエリアにはonpaste属性を設定していません。
JavaScriptの解説
scriptタグでは、画面が読み込まれてから処理するようにwindow.onloadを使っています。
最初にテキストエリア(#textArea)を取得して、次の行で取得した要素からaddEventListenerメソッドを使っています。
第1引数がイベント名で、第2引数がイベント発生時の処理です。
「event.clipboardData.getData」で貼り付けたデータを取得して、divタグ(#pasteText)に入れて表示しています。
動作を確認すると、onpaste属性を使った時と同様に1回だけイベントが発生することが確認できます。
pasteイベントでペースト(貼り付け)を禁止する
pasteイベントを使って、特定のフィールドでペーストを禁止することも可能です。
下記のサンプルではテキストエリアでペーストを禁止しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>onpaste サンプル</title>
</head>
<body>
<textarea id="textArea" rows="4" cols="30" placeholder="ペースト禁止"></textarea><br />
<script>
window.onload = () =>
{
const textArea = document.querySelector("#textArea");
textArea.addEventListener("paste", function(event) {
event.preventDefault();
alert("このフィールドではペーストが禁止されています！");
});
}
</script>
</body>
</html>
HTMLの解説
ペースト(貼り付け)を禁止するテキストエリア(“#textArea”)を用意しています。
JavaScriptの解説
まず、画面が読み込まれてから処理するようにwindow.onloadを使っています。
テキストエリアをdocument.querySelectorで取得して、pasteイベントを追加しました。
イベントが走った時の引数で受けたevent変数を使って、preventDefault()を呼び出すことで、ブラウザのデフォルトの挙動を制限しています。
これで、貼り付けを禁止できます。
動作確認
実際に動作を確認してみました。
文字を入力した後に、切り取って貼り付けると、貼り付けできないことが確認できます。
終わりに
今回はJavaScriptのpasteイベントについて確認していきました。
まとめると、下記のようになります。
・onpaste属性を使うかaddEventListenerを使うことで追加できた。
・pasteイベントを使うことで、貼り付けを禁止できた。
コメント