顶部导航开始 -->

实现一键复制功能(兼容PC/iOS/Android)

实现一键复制功能(兼容PC/iOS/Android),具体代码如下。

Demo地址为: http://www.h5tpl.com/demo/copy.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

	<title>实现一键复制功能</title>
	<script>
		// 思路:要想复制到剪贴板,必须先选中这段文字。
        function copyNum() {
            var NumClip=document.getElementById("clip_num");
            var NValue=NumClip.value;
            var valueLength = NValue.length;
            selectText(NumClip, 0, valueLength);
            document.execCommand("Copy","false",null); // 执行浏览器复制命令
            alert("已复制,可分享给朋友啦,试试看。");
        }
        // input自带的select()方法在苹果端无法进行选择,所以需要自己去写一个类似的方法
        function selectText(obj, startIndex, stopIndex) {
            if (obj.setSelectionRange) {
                obj.setSelectionRange(startIndex, stopIndex);
            } else if (obj.createTextRange) {
                var range = obj.createTextRange();
                range.collapse(true);
                range.moveStart('character', startIndex);
                range.moveEnd('character', stopIndex - startIndex);
                range.select();
            }
            obj.focus();
        }
	</script>
</head>

<body>
<input style="border: none;display: inline-block;" type="text" readonly="" id="clip_num" value="这是需要复制的内容">
<span style="font-size:0.21739rem;font-weight: bold; cursor: pointer;" id="clip_button" onClick="copyNum()">点击复制</span>
</body>

</html>


自学php博客
请先登陆后发表评论
  • 最新评论
  • 总共0条评论
  • © 2014-2016 zixuephp.cn 版权所有
  • ICP证:皖ICP备16012107号
  • 联系邮箱:510082587@qq.com
  • 交流请加微信:weibobf2899 或扫下方二维码