jQuery点击按钮复制内容代码(兼容PC、手机端)

在学习网站制作课程时,有同学咨询如何实现点击网页上的按钮,可以复制指定的内容。这是一种 jquery 点击按钮复制内容功能,通过 JQUERY 可以实现点击后自动复制内容。效果如下图:

下面是 jquery 点击按钮复制内容代码,它是兼容 PC 端和手机端的。示例代码如下:

<!DOCTYPE HTML>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  
    <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>  
 
    <title>复制按钮</title>    
</head>    
<body>    
微信号:<span id="target">xyz2018</span>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#target" id="copy_btn">    
    点击复制    
</button>      
</body>    
<script>    
    $(document).ready(function(){      
        var clipboard = new Clipboard('#copy_btn');    
        clipboard.on('success', function(e) {    
            alert("微信号复制成功",1500);
            e.clearSelection();    
            console.log(e.clearSelection);    
        });    
    });    
</script>    
</html>
最高¥2000红包
限量
云产品通用,可叠加官网常规优惠使用 | 限时领取
相关文章

如何自定义 WordPress 登录以回复链接及文本

阅读 6

默认情况下,开启了“用户必须注册并登录才可以发表评论”,正常的回复按钮会变成“登录以回复”并链接到 wo...博文来自:wordpress教程

禁用WordPress与官网连接解决后台打开速度慢的方法

阅读 27

wordpress有强大的社区支持,有上千万的开发者贡献和审查 WordPress,所以 WordPress 是安全并且活跃的...博文来自:wordpress教程

wordpress网站添加鼠标点击上升文字特效

阅读 123

其实很简单,只要把以下代码添加到当前主题的head.php或footer.php文件的前 <script type="te...博文来自:wordpress教程

wordpress网站添加复制提醒JS代码

阅读 154

首先登录wordpress后台,找到外观里面的编辑,打开footer.php文件,在此之前,加入下面的代码就可以了。...博文来自:wordpress教程

帝国CMS后台登录成功又显示“您还未登录”的解决办法

阅读 25

帝国CMS后台登录显示“登录成功”后,马上跳转显示“您还未登录。 出现此问题是目录权限问题 /e/data/admin...博文来自:帝国cms教程

帝国CMS如何批量修改发布时间的方法

阅读 63

打开后台:找到如下图SQL执行 根据你要操作的模型选择执行如下SQL脚本: 比如这是新闻模型的: 下面这个...博文来自:帝国cms教程

帝国后台登陆显示Cann’t connect to DB解决办法

阅读 250

在帝国根目录中找到/e/config/config.php文件,修改一下数据库账户名和密码即可。 打开你的帝国的根目录...博文来自:帝国cms教程

帝国cms加ssl证书后https访问后台变空白解决方法

阅读 387

以下方法适用帝国cms7.5版本: 7.5版本已经有了http和https自动识别,但是因为一些疑难杂症的原因,自动...博文来自:帝国cms教程

帝国后台登陆显示Cann’t connect to DB解决办法

阅读 250

在帝国根目录中找到/e/config/config.php文件,修改一下数据库账户名和密码即可。 打开你的帝国的根目录...博文来自:帝国cms教程

帝国CMS7.2版升7.5版升级图文教程说明

阅读 117

说明:本升级程序不影响原7.2版的数据与模板。 导航: 一、升级前备份工作 二、升级步骤 三、会员接口升...博文来自:帝国cms教程

帝国CMS站点程序如何备份呢?

阅读 113

帝国CMS站点后台比较强大,我们可以在后台直接进行程序备份。 操作步骤: 1. 登录帝国CMS后台面板,单击...博文来自:帝国cms教程

帝国cms电脑pc站url跳转到手机站url的方法

阅读 97

方法一:帝国pc站跳转到手机静态站 1、假设我们有帝国cms 电脑网站www.mxxm.cc,手机网站m.mxxm.cc , ...博文来自:帝国cms教程

帝国cms专题页面点击率统计代码

阅读 108

专题访问浏览点击统计 &lt;script src=&#091;!--news.url--]e/public/onclick/?ztid=&#091;...博文来自:帝国cms教程

帝国cms灵动标签调用字母所属的信息

阅读 94

[e:loop={"select * from [!db.pre!]ecms_news where infozm='A'",5,24,0}] &l...博文来自:帝国cms教程

我爱模板网 从零开始学建站,学习技能、解决问题!

每个月,我们帮助开发者解决各种各样的技术问题。并助力他们在技术能力上获得提升。
没有账号? 忘记密码?

社交账号快速登录