未加星标

浅谈 JS 复制

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

最近帮朋友做了个简单的小程序,需要点击按钮实现复制用户名的功能,使用 window.clipboardData实现了IE下的复制功能,遇到Chrome就没办法了。百度发现了Zepto.js,非常好用。

周末闲来无事,发现Chrome/Firefox支持Window.getSelection,做了简单的封装,替换掉Zepto.js,有简化掉了很多代码。

代码比较简单,测试地址: http://www.miaoqiyuan.cn/products/copy.html ,代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JS复制 演示/支持IE、Chrome,兼容电脑、手机 - miaoqiyuan.cn</title>
<style type="text/css">
html {}
body {
margin: 0;
background: #EEE;
}
h2 {
text-align: center;
font-family: 'Microsoft Yahei';
}
button {
float: right;
}
.demo-list {
width: 300px;
margin: 10px auto;
}
.demo-list-item {
background: #FAFAFA;
border: solid 5px #DDD;
border-radius: 15px;
padding: 15px;
margin-top: 15px;
}
</style>
<script type="text/javascript">
function copy(domId) {
if (copyDom(document.getElementById(domId))) {
alert('复制成功');
} else {
alert('当前浏览器不支持');
}
}
function copyDom(dom) {
if ('clipboardData' in window) {
window.clipboardData.setData('Text', dom.value || dom.innerText || dom.innerHTML);
} else if ('execCommand' in document && 'getSelection' in window) {
var domType = 'input';
try {
dom.select();
} catch (e) {
domType = 'text';
window.getSelection().selectAllChildren(dom);
}
document.execCommand("Copy");
if (domType == 'input') {
dom.blur();
} else {
window.getSelection().empty();
}
} else {
return false;
}
return true;
}
</script>
</head>
<body>
<h2><a href="http://www.miaoqiyuan.cn/p/js-copy">JS复制 演示/支持IE、Chrome,兼容电脑、手机</a></h2>
<div class="demo-list">
<div class="demo-list-item">
<button onclick="copy('demo_div');">复制</button>
<div id="demo_div">DIV</div>
</div>
<div class="demo-list-item">
<button onclick="copy('demo_input');">复制</button>
<input id="demo_input" value="INPUT"><br >(不支持iPhone)
</div>
<div class="demo-list-item">
<button onclick="copy('demo_textarea');">复制</button>
<textarea id="demo_textarea">TEXTAREA</textarea><br >(不支持iPhone)
</div>
<div class="demo-list-item">
<button onclick="copy('demo_divs');">复制</button>
<div id="demo_divs">
<p>DIVS</p>
<p>DIVS</p>
</div>
</div>
<div class="demo-list-item">
<img width="100%" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAXoUlEQVR4Xu2d0XYcqw5Ek///aN81zo2dOdMNaLck0/bOqxGIqlIhGGf8+9evX2+/bvzv7Y2l//v37/Rdj3Kh69E5SRzFkgI5woTk/8hjpz1QXDrjHlXAKqgzy8FalHBakKNtU9FWzElyoVhSKWgAFLm8OA0gD8vh6UMNhxTy7CQ8y0UDiIuB8hpfqSZCA0jElRarHcArAhTLnUwsUVplU2kAidBS0WoAGkCiDENTaQAhuMaDNYAYmL4BxPCqGK0BJKKqAcTA1ABieFWMHhpA931qtMHsh6tu8e30WHTGK8WkQphEC7PHz4o5s3VZgeWIVw3gAHF6ktO4CtLJu4IGcIwa4fUOh+djtxqABvCBgAagATwhcAcXozlSsVfE2QHEEKAceAV4RcAOwA7ADuDRCg9+NdwrQMygS0ZnP7ZkEz57gPIRME8WlDs7ADuAy6cdFZ8GoAHkIRCbqeRTgApBZ7daNEf6rkBPGPJi//6Cm/w/Gum+qSneBa9ddFmhE/wGkC0+2kITcmb+SQvhLoI+y5PuWwN4RbRClxpA4oMdBXNmHmc/p4bZKSQN4Jg9wgGJodqih+d7Fzn6PoA7bKIiR1oIdgCxk/AueBGNkRgNYPDtPuRTgIpTl5JUkQud0ytAjEVSzCQmltXzaLqeHUDwWkFJosVKiSV50s7HN4BY50O1QK+tfgoQrAZaCHdpae0AYoIgJkxiYlnZAbwj0A30FZJILN1ftolVnFoVJ1o3Xp1X0wq8vAKQqmyM6Rb02dY0gGNkNIDEYiBiJzGJKZdPRfdnB/BKTedbBeWNCoquZwdAEW+Ko8RqABrAXwR8BGwq1oplNIC8QrYDOMDSXwSqKNu8OTUADWBFTVQnXgFW0P3CMZRYrwB5xjGi30fAxOIgYqdCr2gHiVC+4qPMM8woJjQuUTqXp6J70AAuQ/85gQYQO7Uo9BpADOdsXVZ8pEpyfKDwra8AFScyLbrsE4bmMeo4KnKkHdqV/ZHY7L3TgiS5X+kiNYADxCtEmy0wKhQN4Bi5bH40AKBQAhotVko42NZ7CF2vs12syJHyQ3Gmcdl7J1qmudsBAOQo4WApDYCC1hhH9eAjYCJJxDXpCUMJp9ul69kBUMRjcdn8EC3HMn4eTdfDbwBXkiWxxGnJOldiskV0pbWjxni2/4q9jbCm+dM8Ke9316UGQJk/iKPi644jW67IUQMgTMRjRtxpAHE8TyMqioS2dvQEtQOICcIOIIYXHn13oCsKmRoOIYGuRd8wqIHRPAkmj5i769IOgDLvFeADAWpuXgESxTeYyitAD84ln/XT4qInqFeAmFjsAGJ44dF3B7qikDvbXbqWVwAs+bRA3AGkZVA40U6FVVEknfvrXOshie++XqHs06YevgGkrVI40XcXUef+OtfSAAqLIjC1BnDjx7zsjkMDOK4cikugDr9sqAagAVx+zacF8t3jvqyqAwtrABqABrDZ/9YM1O/loRqABqAB/GQDeMv+wPiyJ339BHf56Co7TzpfBWP0etCdS8V6nXP+1gBe4aaFQL00+zFvJqCzPOm+Z+uRn2sABLV4jAYQvAKMINYA4gI8i9AA8rAczaQBaAAfCNgBHJcKNfaeEr62igagAWgAkxrSAK6ZzO2i6UlIheIbwKtEvAL0lI0dgB2AHYAdQK7bVJygZM6KE5k+Alac8tmnJJ3vO8TlVgCfjej8sRrWesXHgBWbIHNiUH4/fj8q/u8uhZD98n6XfVM9xJXAI4jONYATvCnhFSTYAeTd8ysMh5dsbmSF9kYZlrwBVGyCzKkBxMRZUVg7GR/VQwzFa6OJzu0A7ABeECBC0gCuFW9GNOFNA9AANID/I0A7jozizZhDAzhBkQBDWz6y1syFqTAr4nwEzCjVmjkqtDd8A3h8gkAEUbF9InYKGM2ftsmj9SqMis5JcKnggOZPc6G8dv7HKoqJBkBUDa4VFeIbkjf4uLJCLGe50H13myJdb5eDqYLTrf4wyC5AVwiFzqkBxNybmpEdwAHOFY6TLWhKeExWn6OpUDSAGOJUe1QPlFevADFeh6PtAGJgErxiK6yNpkXXbYp0PYLzTpj4BrCm46VR9KSg4svumJY2GRy0k9hpLpRXO4CgWLIFTQmnaVOhaAAxxL0CvOJFMcEdQIyytXsyNYCzuIqCrNj33Y2Kio/um/LaHZety+78S74WvFMsFDBa5PQkp4VA88zGpZPTx55p/t1xGsABAp1ioYTTwtIAYshR46O8dsdpABrABwJUfLGSWhudnUunqdsBHHNMPo14zDSK8wqwVk9Lo7KLbmnRk0HZuWgAMTYo/t1xGkCM1+FoSl5iCmXdiAYQY4lqoTtOA4jxqgEE8fIN4BWwilaeGsfwG4FooiONVAjibL3u/CkJ9GGR4kxO8wosg16yNJzmSXVJHgEpb0sABN/kNIAgqt0CI8U6e/ghc9J9B+G9PJzmqQEcQE/BrHC4XURLMaECI/vWAI4VWNGh2QEEPbuzEGixUgOrEJgGEBMY5ZzqUgOI8TP8TDL7LkzFoAHkPVwF5XF5OOVcA/AKsCS+boHZASzR8jGomx87gBg/dgBBvDSAGGAawCtew6sp/VJQ2jJVCJq4cLdQ6PsAjYuVzXw05W0+8/EIyk/FemROilf7vjWAoGPe5O8GEtFmv8FcyaG9ECCv5PCpeGOiWOMvBbUDiEFOT3IaF8tuPpqeaPOZ7QD+RaDd+OwA7ABWilQDWEHpcwzFSwM4wZl0HPT0pHG0haakE0xiMr4uaLoexaRiPTKnBnCCWgUw5B5GBUaLjpoKjSOipQaWvdZjPsoPzYXySrTnGwBgiRBEi4fG0QKiYieYAOjfQ6hx0/UoJhXrkTkpXu37Hr0B7CToM0ArioAawN3jKJbd+67QJSlyaoy0yGncsOPQAF7h6Rb0LutpAHEbICc9LWQapwEEed2lIK/chYlYNICgUODViHBzRQsaQJBXDSAGWDdeXgFiXasGENPzbb6TPrvw7ACCQrEDOAass8Whoq04RbIL8krbRzigWHbvu4K7eOn/ifAN4AA5Ij4qdiraChF1F0L2ehTL7DxmWqjg7scawBuxsAlanUIqSJ9qYRjXaYqzAiIfqVKcqRZKSBhMWmFiZ8vthMnwS0EpCXSDhAQqTLo3GqcBUOR64oj2Kq4APbv9XEUDaEJcA2gCGi6jAUDgjsLsAF5R0QASBVYwlQaQCKoGoAH8RYBqIVGOS1NpAEswrQ2ipBMSfAM45oR0HCRmpgiqhdm82T8n2vMN4IQFSjohQQPQADLMgGjvRxsAPS2yzSF7vpmYKvZNTawil7P9dxbIIwe6txF/dE4SR2Jm+x7tDWuI/h7ALhvUAI5lQQtWA8h5v9mlPqYHmgYwg+j55xXEYvcefJOtBpBTyLNTOfuXqtoPNA1AA1hBgBpKt7l5BVhh83MM/kWgipOQ3HHaHbPg1O0uEoKZBhC7au1SHzM70ABmCP3n5xXEagB57bodQEzQGkAML/w6TY2jW9A+AuaYEeWbdGf048j3943RGwDdBBVtsBanw2nbOp04eUB3B3CWfgXfyVC9T1eRJ53zLI5ySmuHrqcBVCg0OCcmD75HaAA5p/zIjCinGkCweMjD4ewUSUxhaSoqFnpqaQAawF8E7ACWSrR2kAYQwzfb+GYHArlKUk7tAGJaGI4mxCUuvzwVFUt2IWTPtwxAcGBFnnRO3wASyQtONR2uAUwhehpAiyC2yvXRFXnSOTWAIJ/0Y47gMu/DNYAYarQIYqtcH12RJ53z9gYw+tNgtDW9TnH9DNSIKjDpzoWst5OZUg5okRM10rXa4zSAGL1UfPRxZxRHc9EAXlGlWJ7x017I8CPh3xqABrCCgB3ACkqfYzSAGF7to8kpOHtXoJvozoWspwHE2NUAYni1jyZFoAEc00SxpKTTdp0WJcmTrtUe5xUgRi8Vn28AMZy73z6yeW0vZN8AYgKjp1a2UB5Zd+dC1vMKkKcvimVJ3KgDiG35c3RJoicORwuywqErTi3aORBciDHMrkV0zjtoj/JdoT1ac8NPAe5AAhH67NSlYFJBUJypkM7Wo8VagRfFhOZC487ypPN1x2kABwxSEjSAVwSoqWgAMSypZjUADeADAVqsVHy0yKnR0o6J4EIx6Y7TADQADaDg/410FzJdTwPQADSAn2wA9DsBu9sw0i6S1m22DnXabrxouzvb/w4/32lvFRprfVjUAGKS1gBieFWM1gASHwg1gJhENYAYXhWjNQANYElXFe2ZBrAEfekgDUADWBKYBnAME/3lqSXQGwZpABrAksw0AA1gSSgXBlVozEfAC4T8G1pBjleAJHIuTGMH8AM7gDPSaUFWxI00Tc2I5kk/drxQl4eh3cVK16P8ZJ/W3bzhPwxCE80miBZIRZwGkHcyUSPK1hfNg+qL1hXNUwM4QI6KSAPQAP4ioAGcVAMtLq8AseLqPknO1qN84xONfjPOII7kogFoAE8I0DvmXYSkATwjcBfevAJ4BSAH3HKMHcDenZsGoAEsFzMZqAFsbgAV3wlI759ELCTmkd9d4ioeFkkhV3CancdXzHfW6ndf+ehvd5Z8H0CFWAjQ9B62U5wG8BVlvb4m0WVnfcx2ogEcIKQBzGRT/+AVy+DrRmsAQeyzi+surTzN0w4gKLDm4RpAEHAN4BUwfH9L/uw6SOXHcMopXW+nOA0gyAYVCwE6e62veDy0AwgKrHk40aVvACcIkDaZxHxFIdM8NYDmig4u960NoOIEzRY0bZ9pHhWYUHOoiDvDZad9B2v0Yzj9aI6e2GdxnbzNsBp+ClBBOi08IszZ5jsJqsCyU0g75V/BK52THECdvM32pQEcIFRB0E4FRE7CnfKfiZoYO51TAzhAjoAyu5fbAbwiUGFUBOeKPKiGsjvMmTGQPCvwmuV5aoqjXwWucP1sgggBM7AqCKrAsiJPDWCmjuefE/118jbbjVcArwAzjbz/fCcDW0o4yCudUwPwCvCBQIWzdxeeHUDMCjSAJgO4O9Ak/5kUKwyHGED2tW62b2qKo3kpP50PqiX53+UNgBDUWSBXRDuLPX3Aafz6K4L/I29SIDM8NIBXhDA/GsArmN2inQleA1h/eKPc4QIC/x9jKwPTADSAFQPqLJBZPlsVkAaQ2I7AlnaHE/KKaGexO+xPAzhmgXQcWxmYHYAdwIoBaQAawBMC9IGNvhgTAdIcia

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:浅谈 JS 复制
本站链接:https://www.codesec.net/view/611860.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(14)