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