js复制功能的有效方法总结新
一，用js原生的document.execCommand()
function copy(){var Url2=document.getElementById("xjh");
Url2.select();
try{
if(document.execCommand('copy', true, null)){
document.execCommand("Copy");
alert("已復制好，可貼粘。");
} else{
alert("復制失敗，請手動復制");
}
} catch(err){
alert("復制失敗，請手動復制");
}
}
兼容性：測試過，兼容IE8以上，谷歌43以上也支持。
二,用jquery插件
jquery.zclip.min.js的用法
jquery.zclip.min.js的作用可用jquery的插件：zclip解決js復制在不同瀏覽器的支持度。但是前提需要安裝flash。
首先的引用jquery包 ?
? <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.zclip.min.js"></script> ? //導入jquery插件 $(function(){ $('#copy_input').zclip({ path: 'js/ZeroClipboard.swf', ? //swf文件不能掉，注意：是下載的swf文件。 copy: function(){//復制內容 return $('#mytext').val(); }, afterCopy: function(){//復制成功 $("<span id='msg'/>").insertAfter($('#copy_input')).text('復制成功'); } }); });
如果是復制的內容來自輸入框input、textarea等，copy對象使用：
調用方法： copy: function(){ return $('#mytext').val(); } //如果是復制的內容來自頁面元素div、p之類的，copy對象使用：
代碼如下
copy: $('#mytext').text();
?
三,clipboard.js 的使用
clipboard.js 是一個不需要flash，將文本復制到剪貼板的插件。簡單介紹下基本運用。
1 引入插件
<pre>
<script src="js/clipboard.min.js"></script>
</pre>
2基本使用
首先需要您需要通過傳遞DOM選擇器，HTML元素或HTML元素列表來實例化它。
<pre>
new Clipboard('.btn');
</pre>
1用一個元素當觸發器來復制另一個元素的文本,data-clipboard-target屬性后需要跟屬性選擇器
<pre>
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button class="btn" data-clipboard-target="#foo">
</button>
</pre>
另外還有另外一個屬性data-clipboard-action屬性，以指定是要要么copy還是要cut操作。默認情況下是copy。cut操作只適用于<input>或<textarea>元素。
<pre>
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
</pre>
2從屬性中復制文本，不需要另一個元素當觸發器，可以使用data-clipboard-text屬性，在后面放上需要復制的文本.
<pre>
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
</pre>
3其他說明
1通過運行檢查clipboard.js是否支持Clipboard.isSupported()，返回true則可以使用。
2顯示一些用戶反饋或捕獲在復制/剪切操作后選擇的內容。操作，文本，觸發元素
<pre>
var clipboard = new Clipboard('.btn');
</pre>
3該插件使用的是事件委托的方式來觸發，所以大大減少了對dom的操作。
4高級使用
如果你不想修改你的HTML，那么你可以使用一個非常方便的命令API。所有你需要做的是聲明一個函數，寫下你想要的操作，并返回一個值。下面是一個對不同id的觸發器返回不同的值的例子。具體的使用方法請看https://clipboardjs.com
<pre>
<body>
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button id='foo_1' class="btn" data-clipboard-target="#foo">
</button>
</body>
<script>
new Clipboard('.btn', {
text: function(trigger) {
if(trigger.getAttribute('id')=='foo_1'){
return 1;
}else{
return 2;
}
}
});
</script>
</pre>
作者：最愛是荔枝
鏈接：https://www.jianshu.com/p/3f8867de041e
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
轉載于:https://www.cnblogs.com/LGDD/p/8242535.html
總結
以上是生活随笔為你收集整理的js复制功能的有效方法总结新的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： K：hash(哈希)碰撞攻击
- 下一篇： 用自然语言指导强化学习agent打游戏，