FireFox 3.5およびIE8でクリップボードにコピーする

10番目のフラッシュFF3.5とIE8の登場により、「クリップボードにコピー」マジックボタンは多くのサイトで機能しなくなりました。 セキュリティ上の理由で機能しなくなりました(ウェブサイトにアクセスしたときに、左側のリンクがバッファーや広告テキストに表示されない、または攻撃者がこの機能を他の目的で使用しなかったため)。



EkshonSkriptでは、ユーザーが操作したとき、つまりクリップをクリックしたときにのみクリップボードにコピーできます(そしてクリップを透明にすることができます)。 Jhuckabyは、 ゼロクリップボードスクリプトを作成するときにこれを利用しました。



デモを見る:



このスクリプトは、最新のすべてのブラウザーで機能します。

FF3.5、IE8、IE8(mod7)、Chrome3、Opera10b2、Safari4でテスト済み。 フラッシュ9および10をサポートします。



要点:



JSを使用してスクリプトを初期化し、 ZeroClipboard.swfへのパスを指定し 、コピー用のクライアントを作成したら 、クリックしてクリップボードに情報を安全に入力できます。



しかし、スクリプトはこれに限定されず、素晴らしいプロパティ(メソッド)を持っています。



これについて、さらに多くのこと、素晴らしいWikiscript





< html >

< body >

<!-- , ZeroClipboard.swf *.js -->

< script type ="text/javascript" src ="ZeroClipboard.js" ></ script >

<!-- -->

<div id= "d_clip_button" style= "border:1px solid black; padding:20px;" >Copy To Clipboard</div>



<script language= "JavaScript" >

//

var clip = new ZeroClipboard.Client();

//

clip.setText( 'Copy me!' );

//

clip.glue( 'd_clip_button' );

</ script >

</ body >

</ html >




* This source code was highlighted with Source Code Highlighter .








完全な例



< html >

< head >

< style type ="text/css" >

#d_clip_button {

text-align:center;

border:1px solid black;

background-color:#ccc;

margin:10px; padding:10px;

}

/* -- */

#d_clip_button.hover { background-color:#eee; }

#d_clip_button.active { background-color:#aaa; }

</ style >

</ head >

< body >

< script type ="text/javascript" src ="ZeroClipboard.js" ></ script >



Copy to Clipboard: <input type= "text" id= "clip_text" size= "40" value= "Copy me!" /><br/><br/>



<div id= "d_clip_button" >Copy To Clipboard</div>



<script language= "JavaScript" >

var clip = new ZeroClipboard.Client();

clip.setMoviePath( 'ZeroClipboard.swf' ); //

clip.setText( '' ); // onouseDown

clip.setHandCursor( true ); //

clip.setCSSEffects( true ); // CSS



clip.addEventListener( 'load' , function (client) {

// alert( " " );

});



clip.addEventListener( 'complete' , function (client, text) {

alert( " : " + text );

});



clip.addEventListener( 'mouseOver' , function (client) {

// alert(" ");

});



clip.addEventListener( 'mouseOut' , function (client) {

// alert(" ");

});



clip.addEventListener( 'mouseDown' , function (client) {

// alert(" ");

// , 'clip_text'

clip.setText( document .getElementById( 'clip_text' ).value );

});



clip.addEventListener( 'mouseUp' , function (client) {

// alert(" ");

});

// 'd_clip_button'

clip.glue( 'd_clip_button' );

</ script >

</ body >

</ html >




* This source code was highlighted with Source Code Highlighter .








もう一度リンク:





ユーザーdohtar による詳細表示



はげキーボードで入力



All Articles