クリップボードデータの取得

詳細
互換性:
 
クリップボードのデータを取得するには、各ブラウザ間で大きな互換性の問題があります.
 
ie:
 
pasterまたはbeforepasteをリスニングすることにより、グローバル変数clipboardDataで貼り付けデータを取得します.
 

onpaste=function(){

alert(clipboardData.getData("Text"););

}

 
ただし、テキストデータのみを取得するリッチテキストhtmlを取得できないという限界がある.
 
 
firefox:
 
ffは豊富なapiインタフェースを提供しているが、ユーザーが権限を高める必要があるということはffのapiを虚構にしている.
 
 
chrome:
 
w 3 clipboard api(ieを参照)をサポートし、html/text形式のクリップボードの内容を自由に取得でき、便利です.
 
 

onpaste=function(e){
e.clipboardData.getData("text/html"); // html   
e.clipboardData.getData("text/plain");//      
}

 
 
考えを変えて自分で実現する
 
ブラウザのクリップボード関連apiを完全に迂回し、trickを経て、ユーザーの貼り付け情報を取得することができます.主に以下のイベントに注目しています.
 
beforepaste : ie only. 貼り付けられたデータをページに置く前にトリガーし、falseに戻ると右クリックメニューに貼り付けオプションがあります.
 
paste :
 
ie:貼り付けたデータをページに置くとトリガーされます.
firefox/chrome:貼り付けられたデータをページの前に置くとトリガーされます.
 
 
主な実現構想は、データをa入力領域に貼り付ける前に、焦点を隠れたb入力領域に位置決めし、ユーザーデータをb領域に貼り付け、b領域から処理を取り出してからa領域に記入し、焦点をa領域に回復することである.
 
 

$("#a").on(ie?"beforepaste":"paste",function(e){		
		$("#b").text("");
		$("#b")[0].focus();
		setTimeout(function(){
			$("#a").text($("#b").text().replace(/[^\d]+/,""));
			$("#a")[0].focus();
		},0);
	});
});

 
これにより,間接的にクリップボードデータを取得して処理することができる.
 
ただし、aを選択する領域の位置の保存と復元、貼り付けられた部分の置換など、複雑な他の処理(続き)が必要である.
 
event paste demo @ google code
 
refer
 
http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser http://msdn.microsoft.com/en-us/library/ms536905%28v=VS.85%29.aspx https://developer.mozilla.org/en/DOM/element.onpaste http://help.dottoro.com/ljxqbxkf.php http://almaer.com/blog/supporting-the-system-clipboard-in-your-web-applications-what-a-pain