js 实现复制粘贴功能

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!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,同时网站处于发布状态或者在本地有搭建好的服务器，单纯的运行页面是无法使用的。

posted @   chenjsh36  阅读(189)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
阅读排行：
· 互联网不景气了那就玩玩嵌入式吧，用纯.NET开发并制作一个智能桌面机器人（四）：结合BotSharp
· 一个基于 .NET 开源免费的异地组网和内网穿透工具
· 《HelloGitHub》第 108 期
· Windows桌面应用自动更新解决方案SharpUpdater5发布
· 我的家庭实验室服务器集群硬件清单
点击右上角即可分享
微信分享提示