有时候我们可以看到,有些网站在分享淘宝的淘宝密码或者网站文章的时候,可以点击一个按钮复制。这个操作非常的用户友好,可以直接点击复制打开对应的链接。当然,我们也可以使用一键复制功能,提高用户复制粘贴其他内容的体验。实现该功能的方法是共享的。
首先,下载所需的文档。
一共包含两个文件:“clipboard.min.js”文件和 “css 样式”文件
下载后解压,得到 clipboard.min.js 和 copy.css ,把两个文件上传到网站根目录。
二、引用 JS 与 css 文件
1,、引用 js 库,在当前主题的 footer.php 文件的末尾添加以下代码
2、引用 css 样式,在当前主题的 header.php 模板添加以下代码
注意:一定要把上方代码中的文件路径替换成自己网站的文件路径。
三、文章中添加一键复制按钮
在编辑文章时,在需要的位置添加以下代码,就可以看到点击一键复制指定内容的按钮了。
添加到文章结尾分享处也是一样的方法,
如果想要实现点击打开链接的同时,复制指定的内容,可以参考下方代码:
补充说明
如果不需要我们提供的 css 样式,可以省略 css 操作的相关步骤。当然,您也可以使用自己修改喜欢的样式文件。
转载请注明:汇站网 » 网站通过 JS 代码实现点击按钮一键复制指定内容方法教程
汇站网 WordPress教程 网站通过 JS 代码实现点击按钮一键复制指定内容方法教程 https://www.huizhanii.com/20206.html
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
相关文章
- 如果WordPress搜索结果为空,自动跳转到网站首页 2024-02-01
- 浏览器缓存可以分为强缓存和协商缓存两种方式 2024-01-21
- 如何让WordPress支持上传WebP格式图片? 2024-01-20
- 利用WordPress设置API实现自定义设置页面。 2024-01-20
- WordPress api接口 版本历史 2024-01-20
- WordPress用户密码加密和验证的详细解释 2024-01-19
- WordPress禁用媒体附件页面教程 2024-01-19
- WordPress修改了文章的默认密码保护提示 2024-01-19
- WordPress配置(站群)多站点详细教程方法 2024-01-19
- WordPress如何用指定图片自动替换文章图片 2024-01-17
- 版权所有 © 版权作者所有
- 版权说明 本站所有资源归版权作者所有 i
版权声明
温馨提示:
本站所提供的模板源码(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上购买或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: [email protected]/* */),我们会及时删除,给您带来的不便,我们深表歉意!
看看咋样 111111111111111111111111111111111111111111111111111111111111
- 2023-09-20479
- 2021-12-191,213
- 2022-05-04669
WordPress站点使用阿里巴巴矢量图标库Iconfont的详细教程
2021-12-23618WordPress文章自动添加TAG标签并添加内链(标题+内容)
2021-12-09388
- 小黑猿资源网交易中心商城源码Discuz模板AIUI漂亮的WordPress外链跳转柒上网络小说源码宠物养殖系统源码小初高教育资源分享整站源码游戏代练系统自动挂机赚钱源码在线工具系统源码主题美化全站利用一段代码绕过PHP授权代码迪恩素材教程资源房产信息wordpress博客主题笑话段子主题模板打赏系统多首音乐歌曲轮播养鼠非你莫鼠discuzx3.2微社区无法发贴回复织梦化妆美容美白海螺模版V20修复版自适应图片主题源码帝国cms仿中华养生网OneDrive多网盘挂载程序Scanner对象完美运营级商城系统支持商家入驻帝国CMS7.5仿六皮游戏网黑色质量检测网站最新BingSNS拓客社群系统中文小说网杰奇cms仿战狼影院电影源码