前言:两个小技巧
一、输出选中的文字内容
<body> <div id="content" style="width:300px; margin:50px;"> 确认过眼神 我遇上对的人<br /> 我策马出征 马蹄声如泪奔<br /> 青石板上的月光照进这山城<br /> 我一路的跟 你轮回声 我对你用情极深<br /> 洛阳城旁的老树根<br /> 像回忆般延伸你问<br /> 经过是谁的心跳声<br /> 我拿醇酒一坛饮恨<br /> 你那千年眼神是我<br /> 醉醉坠入赤壁的 伤痕<br /> 确认过眼神 我遇上对的人<br /> </div> <script> var oContent =document.getElementById('content'); oContent.onmouseup = function(){ alert(selectText()); }; function selectText(){ if(document.Selection){ //ie浏览器 return document.selection.createRange().text; }else{ //标准浏览器 return window.getSelection().toString(); } } </script> </body>
二、复制选中的文字内容
<body> <div id="content" style="width:300px; margin:50px;"> 确认过眼神 我遇上对的人<br /> 我策马出征 马蹄声如泪奔<br /> 青石板上的月光照进这山城<br /> 我一路的跟 你轮回声 我对你用情极深<br /> 洛阳城旁的老树根<br /> 像回忆般延伸你问<br /> 经过是谁的心跳声<br /> 我拿醇酒一坛饮恨<br /> 你那千年眼神是我<br /> 醉醉坠入赤壁的 伤痕<br /> 确认过眼神 我遇上对的人<br /> </div> <script> var oContent =document.getElementById('content'); oContent.onmouseup = function(){ document.execCommand("Copy"); alert("复制成功") }; </script>
选取文字,抬起鼠标后,就能对选中的文字进行复制到剪切板了,可以在其他地方粘贴。
①小技巧:全选input标签里面的所有文字,并全部复制
<body> <input id="content" type="text" value="123456789" /> <script> var oContent =document.getElementById('content'); oContent.onfocus = function(){ oContent.select(); document.execCommand("Copy"); alert("复制成功") }; </script> </body>
②兼容性
查看下API,发现对于document.execCommand("Copy");的兼容性并不是很完美,特别是移动端上。
③推荐插件clipboard.js
<body> <div style=""> <input type="text" id="id_text" value="123456789"> <button type="button" id="id_copy" data-clipboard-target="#id_text" data-clipboard-action="copy">点击复制</button> </div> <script src="https://cdn.bootcss.com/clipboard.js/1.5.15/clipboard.min.js"></script> <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script> <script> $(document).ready(function(){ var clipboard = new Clipboard("#id_copy"); clipboard.on("success",function (element) {//复制成功的回调 console.log("复制成功,复制内容:" + element.text); }); }); </script>对于大多数移动端浏览器该插件兼容效果都不错,测试了蛮多浏览器,只在UC浏览器上遇到出现无法复制问题。(如果还有其他朋友在其他浏览器遇到问题,麻烦告知)。