使用clipboard.js实现移动端页面一键复制功能 + 弹出复制成功提示

最近再写一个简单的html官网移动端页面，需求是一键复制邀请码，再百度上找了好多例子各种尝试然后找到一种可以解决的办法

html部分

<input type="text" id="copyVal" readonly value="复制我" /><button class="copyBtn" data-clipboard-target="#copyVal">点击复制</button>

尝试了好多就这个好用 button

引入clipboard.min.js 可以使用BootCDN 也可以下载clipboard.min.js

js部分

var copyBtn = new ClipboardJS('.copyBtn');copyBtn.on("success",function(e){// 复制成功// alert(e.text);showMessage('已成功复制邀请码','success',2000)e.clearSelection();
});
copyBtn.on("error",function(e){//复制失败；showMessage('复制邀请码失败','error',2000)console.log( e.action )
});

alert提示太丑了换了这种的

function showMessage(message,type,time) {let str = ''switch (type) {case 'success':str = '<div class="success-message" style="width: 100%;height: 50px;background-color: #030026;font-size:17px;text-align: center;color:#fff;position: fixed;left: 0%;bottom: 0%;line-height: 50px;z-index: 9999">\n' +'    <span class="mes-text">'+message+'</span></div>'break;case 'error':str = '<div class="error-message" style="width: 100%;height: 50px;background-color: #030026;font-size:17px;text-align: center;color: #fff;position: fixed;left: 0%;bottom: 0%;line-height: 50px;z-index: 9999">\n' +'    <span class="mes-text">'+message+'</span></div>'}$('body').append(str)setTimeout(function () {$('.'+type+'-message').remove()},time)}

使用clipboard.js实现移动端页面一键复制功能 + 弹出复制成功提示相关推荐

移动端页面一键保存到桌面
移动端页面一键保存到桌面一, head添加meta和link <meta name="apple-mobile-web-app-capable" content=" ...
JS组件Bootstrap实现弹出框和提示框效果代码
前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编辑功能,一般常见的主要有两种处理方式:行内编辑和弹出框编辑.在增加用户体验方面,弹出框和提示框起着重要的作用,如果你的 ...
android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起
在做一个基于企业微信的h5移动页面时,当软键盘弹出时,底部fixed定位在ios上没事,安卓手机上,底部按钮会被顶起到软键盘,查看原应时由于软键盘顶起时,安卓设备的视图会变小.造成固定定位按钮呗顶起. ...
html自定义js程序,JS中微信小程序自定义底部弹出框
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文. html CSS .commodity_screen { width: 100%; height: 1 ...
html5仿qq空间,JS实现的仿QQ空间图片弹出效果代码
本文实例讲述了JS实现的仿QQ空间图片弹出效果代码.分享给大家供大家参考,具体如下: function imageShow(which_click) { var image_path = which_ ...
js在手机端如何用脚本调用弹出键盘？
js在手机端如何用脚本调用弹出键盘? 鍵盤只能靠使用者行為觸發,不能通過腳本觸發,測試過 ios 和 android 確實是如此. 而所謂的使用者行為只可以通過綁定事件觸發比如: <input ...
移动端网站，键盘弹出对页面的影响
在移动端网站中,ios与安卓键盘弹出时对页面有不同的处理方式. ios,键盘弹出但整体页面高度不变. 安卓,页面高度=屏幕高度-键盘高度这样对页面样式就会造成不同的影响. 当有表单弹窗,且弹窗高度在 ...
html关闭页面弹出再见信息提示框,js弹出框、对话框、提示框、弹窗总结
一.JS的三种最常见的对话框//====================== JS最常用三种弹出对话框 ======================== //弹出对话框并输出一段提示信息 functi ...
用webstorm在chrome 调试页面时一直弹出 copy authorization url to clipboard
用chrome来调试页面,每次刷新会弹出 requested without authorization, 是因为更新后的bug,可以在Setting - debugger中设置转载于:https: ...

使用clipboard.js实现移动端页面一键复制功能 + 弹出复制成功提示

使用clipboard.js实现移动端页面一键复制功能 + 弹出复制成功提示相关推荐

最新文章

热门文章