onpasteはペースト直前に実行される

JavaScriptで右クリックからペーストを選択した時に、それをトリガーにして何かを実行したいとする。たとえば、textareaに文字列を入力すると、入力結果をプレビュー欄に表示させる、というような場合。

ctrl+Vならonkeyupでいい。だけどマウスの右クリックでペーストすると、それではダメだ。キーボードは叩いていないんだからイベントが発生しない。

onmouseupでいけるだろうと思ったが、うまくいかない。少なくともFirefoxでは反応しなかった。

どのボタンでクリックされたか判別する【JavaScript】 – Programming Magicという記事を拝見したところ、Firefoxではマウスの右クリックは拾えないようだ。

ならば、ということでonpasteというイベントを使ってみた。実はこのイベントを使ったのは初めてなんだけど、ペーストした追加部分がプレビューに含まれていない。

調べてみたら、onpasteはペーストする直前のタイミングで処理を行なうらしい。
うーん。としばらく考えたけど、setTimeout関数を使って実現できた。

<textarea name="ta" id="ta" onclick="clear_value(this);" onkeyup="preview();" onpaste="setTimeout(preview,10);">
ここにご記入ください。
</textarea>

<div id="pv"></div>

<script type="text/javascript">
<!--
var flag={"ta":0};
var ta=document.getElementById('ta');
var pv=document.getElementById('pv');

var clear_value=function(elem){
	if(!flag[elem.name]){
		elem.value='';
		flag[elem.name]++;
	}
}

var preview=function(){
	pv.innerHTML=ta.value;
}
// -->
</script>

setTimeoutなし （続けて2回右クリックでペーストするとわかる）

<br /> ここにご記入ください。<br />

setTimeoutあり （狙いどおりの動作）

<br /> ここにご記入ください。<br />