onpaste - ペースト時に発火する

投稿日:

JavaScriptの、イベントハンドラのonpasteは、ペーストした時に発火して処理を実行します。

説明

イベントハンドラのonpasteは、ペーストした時に発火するイベントです。右クリックなどのコンテキストメニューで貼り付けを実行した場合、キーボードショートカットでペーストした場合のいずれも発火します。

inputElement.addEventListener( "paste", function() {
	setTimeout( function() {
		// 処理を実行
	}, 10 ) ;
} ) ;

注意しなければいけないのは、イベントが発火して処理が実行される時点では、まだフォームには貼り付けた値が入力されていないということです。流れとしては、貼り付けを実行、イベントが発火して処理を実行、フォームに貼り付けた値が入力される、という順番になります。なのでonpasteイベントで貼り付けた値を取得したい場合は、例えばsetTimeout()で処理の実行を遅らせましょう。

サンプルコード

<input id="target">
// 要素を取得
var inputElement = document.getElementById( "target" ) ;

// 処理を定義
var action = function() {
	// 処理内容
}

//　イベントを設定 ( addEventListener )
inputElement.addEventListener( "paste", action ) ;

// イベントを削除
inputElement.removeEventListener( "paste", action ) ;
// 要素を取得
var inputElement = document.getElementById( "target" ) ;

// イベントを設定 ( onpaste )
inputElement.onpaste = function() {
	// 処理内容
}

// イベントを削除
inputElement.onpaste = null ;

デモ

入力フォームにonpasteイベントを設定しました。テキストを貼り付けてみて下さい。イベントが発生するごとに、発生回数がカウントアップされます。

関連項目

外部リンク