支持火狐,ie,谷歌浏览器的【点击复制】功能

CSS:

<style type="text/css">
#d_clip_button {
width:150px;
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>

copy.php:

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

<div id="d_clip_button">【点击复制】</div>

<textarea rows=2 id="copyid"><?php echo $content; ?></textarea>

<script language="JavaScript">
ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard.swf' );  //和copy.php不在同一目录需设置setMoviePath
ZeroClipboard.setMoviePath( '/js/zero/ZeroClipboard10.swf' );
var clip = new ZeroClipboard.Client();   //创建新的Zero Clipboard对象
clip.setText( '' ); // will be set later on mouseDown   //清空剪贴板
clip.setHandCursor( true );      //设置鼠标移到复制框时的形状
clip.setCSSEffects( true );          //启用css
clip.addEventListener( 'load', function(client) {
// alert( "movie is loaded" );
} );
clip.addEventListener( 'complete', function(client, text) {     //复制完成后的监听事件

// alert("Copied text to clipboard: " + text );

document.form1.submit();           // 复制到剪贴板成功后提交表单
clip.hide();                                          // 复制一次后,hide()使复制按钮失效,防止重复计算使用次数
} );
clip.addEventListener( 'mouseOver', function(client) {
// alert("mouse over");
} );
clip.addEventListener( 'mouseOut', function(client) {
// alert("mouse out");
} );
clip.addEventListener( 'mouseDown', function(client) {
// set text to copy here
clip.setText( document.getElementById('copyid').value );
// alert("mouse down");
} );
clip.addEventListener( 'mouseUp', function(client) {
// alert("mouse up");
} );
clip.glue( 'd_clip_button' );
</script>
posted @ 2011-06-30 22:38  暗淡  阅读(1635)  评论(0编辑  收藏  举报