<!DOCTYPE html> <!-- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> --> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>ZeroClipboard(复制功能)</title> </head> <body> <label for="cardid">卡号:</label> <input type="text" name="cardid" id="cardid" value="123456789" readonly="readonly" /> <button id="copycardid">点击复制卡号</button> </body> </html> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="ZeroClipboard.js"></script> <script type="text/javascript"> $(function(){ init(); }); function init() { // ZeroClipboard.setMoviePath( "ZeroClipboard.swf" ); var clip = new ZeroClipboard.Client(); // 新建一个对象 clip.setHandCursor( true ); clip.setText($('#cardid').val()); // 设置要复制的文本。 clip.addEventListener( "mouseUp", function(client) { alert("复制卡号成功!"); }); // 注册一个 button,参数为 id。点击这个 button 就会复制。 //这个 button 不一定要求是一个 input 按钮,也可以是其他 DOM 元素。 clip.glue("copycardid"); // 和上一句位置不可调换 } </script>
需要引入 ZeroClipboard.js 和 ZeroClipboard.swf,同时网站处于发布状态或者在本地有搭建好的服务器,单纯的运行页面是无法使用的。