js實現(xiàn)一鍵復制功能
項目描述:最近做一個移動端活動頁面,用戶抽獎后會生成一個兌換碼,為了優(yōu)化用戶體驗,需要做一個復制按鈕,能夠一鍵復制兌換碼。
項目需求: 兼容移動端所有主流瀏覽器。并且做為安卓和IOS的H5頁面。
目前能夠實現(xiàn)復制功能的方法有以下幾種:
- execCommand("copy");
- clipboardData;
- ZeroClipboard.js
1.execCommand:是doucment對象的方法,可以實現(xiàn)瀏覽器菜單的很多功能,如保存文件,打開新文件,撤銷,復制,等等??梢愿玫耐瓿晌谋揪庉?/strong>
有如下用法:
【全選】
格式:document.execCommand("SelectAll");
【打開】
格式:document.execCommand("Open");
【另存為】
格式:document.execCommand("SaveAs");
【打印】
格式:document.execCommand("print");
【剪切】
格式:document.execCommand("Cut","false",null);
【刪除】
格式:document.execCommand("Delete","false",null);
【改變文本字體】
格式:document.execCommand("FontName","false",sFontName);
【改變字體大小】
格式:document.execCommand("FontSize","false",sSize|iSize);
【使絕對定位的元素可拖動】
格式:document.execCommand("2D-Position","false","true");
【復制】
格式:document.execCommand("Copy","false",null);
等等
應用實例:
HTML:
<input onclick="copy()" value="你好.要copy的內容!">
js代碼:
function copy(){
var Url2=document.getElementById("js-copy-text");
Url2.select(); // 選擇對象
try{
if(document.execCommand('copy', false, null)){
document.execCommand("Copy");
alert("已復制好,可貼粘。");
} else{
alert("復制失敗,請手動復制");
}
} catch(err){
alert("復制失敗,請手動復制");
}
}
注意:經測試該方法,PC端IE需要手動設置權限,其他瀏覽器均支持,M端很少瀏覽器支持;
2. clipboardData:對象提供了對剪貼板的訪問
clipboardData有三個方法:
- clearData(sDataFormat)刪除剪貼板中指定格式的數(shù)據(jù);
- clearData(sDataFormat)getData(sDataFormat)從剪貼板中獲取制定格式的數(shù)據(jù);
- clearData(sDataFormat)setData(sDataFormat,sData)給剪貼板賦予指定格式的數(shù)據(jù),返回true表示操作成功;
應用實例:
<input onclick="copy(this)" value="你好.要copy的內容!">
js代碼:
function copy(){
window.clipboardData.setData("text",document.getElementById("mytext").value);
alert("The text is on the clipboard, try to paste it!");
}
注意:經測試該方法,僅在IE瀏覽器中有效;
在其他瀏覽器運行會報錯:
firefox:TypeError: window.clipboardData is undefined
chrom: TypeError: Cannot read property 'setData' of undefined
經查資料:
MSDN https://msdn.microsoft.com/en-us/library/ms535220(v=vs.85).aspx
This object is available in script as of Microsoft Internet Explorer 5.
http://help.dottoro.com/ljctuhrg.php 也表示該方法出于對安全性的考慮,現(xiàn)在只支持IE:
In Firefox, Opera, Google Chrome and Safari, use the execCommand method with the 'Paste' command to retrieve and with the 'Copy' command to set the text content of the clipboard. Because of security restrictions, this method may not always work, see Example 2 for details.
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關文章
js獲取TreeView控件選中節(jié)點的Text和Value值的方法
在實際項目中,遇到一個問題,首先彈出一個新窗口,新窗口中放了一個TreeView控件,現(xiàn)在要解決的是,如何單擊TreeView中一個節(jié)點,返回Text和Value到父頁面并關閉該新窗口,本文將詳細介紹此方法的實現(xiàn)2012-11-11
基于JavaScript代碼實現(xiàn)隨機漂浮圖片廣告
在網上有很多這樣的代碼,不過未必符合W3C標準,因為在頭部加上<!DOCTYPE html>類似標簽之后,漂浮效果就會失效,下面分享一個符合標準的漂浮代碼,使需要的朋友免去大量改造代碼的繁瑣2016-01-01
讓IDE識別webpack的別名alias的實現(xiàn)方法
這篇文章主要介紹了讓IDE識別webpack的別名alias的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
javascript tips提示框組件實現(xiàn)代碼
一個簡單的類似title的提示效果,但現(xiàn)實內容可以很豐富,以上js另存為tip.js,下面是使用的demo。2010-11-11
純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局(實例代碼)
這篇文章主要介紹了純html+css+javascript實現(xiàn)樓層跳躍式的頁面布局,需要的朋友可以參考下2017-10-10
一些Javascript的IE和Firefox(火狐)兼容性的問題總結及常用例子
下面是一些Javascript的IE和Firefox(火狐)兼容性的常用例子2009-05-05

