实现一键复制功能（兼容PC/iOS/Android）

微信 javascript  1849 收藏

实现一键复制功能（兼容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>

实现一键复制功能（兼容PC/iOS/Android）

友情链接