10番目のフラッシュFF3.5とIE8の登場により、「クリップボードにコピー」マジックボタンは多くのサイトで機能しなくなりました。 セキュリティ上の理由で機能しなくなりました(ウェブサイトにアクセスしたときに、左側のリンクがバッファーや広告テキストに表示されない、または攻撃者がこの機能を他の目的で使用しなかったため)。
EkshonSkriptでは、ユーザーが操作したとき、つまりクリップをクリックしたときにのみクリップボードにコピーできます(そしてクリップを透明にすることができます)。
Jhuckabyは、
ゼロクリップボードスクリプトを作成するときに
これを利用しました。
デモを見る:
このスクリプトは、最新のすべてのブラウザーで機能します。
FF3.5、IE8、IE8(mod7)、Chrome3、Opera10b2、Safari4でテスト済み。 フラッシュ9および10をサポートします。
要点:
JSを使用してスクリプトを初期化し、
ZeroClipboard.swfへのパスを
指定し 、コピー用のクライアントを作成し
たら 、クリックしてクリップボードに情報を安全に入力できます。
しかし、スクリプトはこれに限定されず、素晴らしいプロパティ(メソッド)を持っています。
- DOM要素への接着(接着)-つまり、要素のIDを示すことにより、その上にフラッシュドライブを接着し(バッファーにコピーします)、自動的に要素のサイズに調整します。
- kssエフェクト-スクリプトは、ボタンが一時停止されている要素を強調表示し、サブクラス「hover」、「active」(ala pseudo)を作成します。 CSSで必要に応じて変更できます。
- 独自のアイデアを設定する機能は、カスタムの四角形を作成する必要があり、フラッシュドライブをどこにでも固定する必要がない場合です。
- また、標準イベント(onLoad、onMouseOver、onMouseOut、onMouseDown、onMouseUp、onComplete)を使用して操作できます。
これについて、さらに多くのこと、素晴らしい
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 による詳細表示
はげキーボードで入力