欢迎来到元素模板ys720.com,本站提供专业的织梦模板PBOOTCMS模板网站模板网站修改/网站仿站
当前位置:主页 > 程序教程 > 其他教程 >
其他教程

[JS教程]移动端IOS 安卓手机 复制粘贴 JS代码 百分百可用

(元素模板) / 2017-03-07 12:54
市面上的复制代码,基本都只支持PC端,手机端各种不兼容

下面推荐一个JS插件,完美兼容各类 clipboard.js

官网是这个:https://clipboardjs.com

元素模板  YS720.COM 站长 提供自己改的 纯支持 手机端 代码,有提示框,也可以逐渐消失

首先在开头载入JQ库

<script src="jquery.min.js"></script>


然后在结尾载入 CLIPBOARD

  <script src="clipboard.min.js"></script>
 
    <!-- 3. Instantiate clipboard by passing a HTML element -->
    <script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);
 
    clipboard.on('success', function(e) {
        console.log(e);
    });
 
    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>
 
   <script>
 
$(document).ready(function(){
  $("#btn").click(function(){
    $('#errormsg').show();
$("#errormsg").html("复制成功").show(100).fadeOut(3000); 
   
  });
});
 

</script>


再加入DIV 代码 

  <div id="btn" data-clipboard-text="ys720.com">
        <span>Copy</span>
    </div>

<div id="errormsg" style="display:none">复制成功</div>


下面是CSS代码
#errormsg{position:fixed;z-index:999;bottom:50%;left:50%;margin:0 0 -20px -80px;background-color:rgba(0, 0, 0, 0.2);filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#30000000, endColorstr=#30000000);padding:6px;}
#errormsg{padding:10px 20px;text-align:center;border:1px solid #F4D9A6;background-color:#FFFDEE;font-size:14px;}

到这里全部完成了,

里面ys720.com 就是复制成功的内容 

点击这里是演示地址
Copyright @ 2013-2021 元素模板 www.ys720.com All Rights Reserved. 版权所有 元素模板 www.ys720.com