【目錄】
- 明確需求
- html分析
- 代碼實現(xiàn)
- css分析
- js分析
- 代碼實現(xiàn)
只要是文本予权，長按選中就可以復(fù)制，但是需求來了擋也擋不住：
明確需求
為了提升用戶體驗棒掠，點擊【復(fù)制】按鈕就自動復(fù)制到剪貼板者祖，那么就需要前端實現(xiàn)這種功能了立莉。
首先明確了需求就先看一下最終圖片：
html分析
左邊是一個input的文本框，只讀七问，右邊是一個按鈕蜓耻。
代碼實現(xiàn)：
<!--左邊是一個input輸入框，要求只讀烂瘫，而且里面的內(nèi)容通過url?后面的code傳入-->
<input type="text" value="AJS4EFS" readonly id="textAreas"/>
<!--右邊是一個按鈕-->
<a href="javascript:;" class="cuteShareBtn" id="copy">復(fù)制</a>
css分析
這種東西就跳過吧媒熊，不是重點。
js分析
- 點擊按鈕獲取input對象
解決方法：
- 如果使用的jquery坟比，那么直接$("#textArea").select()選中的就是這個input對象
- 如果使用的zepto芦鳍，上面的方法是獲取到的zepto對象是不支持原生select()方法的，那么就使用原生的辦法
var obj = document.getElementById("textAreas");
obj.select();
- 然后復(fù)制到剪貼板
兩行葛账？看起來是不是很簡單柠衅？哈哈~那你就錯了，這里面是有坑的籍琳。
第一目前沒有一個很完美的方法可以兼容各個瀏覽器和移動端菲宴，引用插件也是一樣的。
查了半天最好的辦法就是使用 document.execCommand("Copy")
兼容性是不錯的：
手機安卓支持到4.1趋急、各種瀏覽器是可以的喝峦，但是唯獨ios是不支持的，來給我把刀呜达，ios你這玩意你限制是干什么谣蠢？是要保護手機安全還是咋的。
所以只是pc端 使用那么就下面幾行代碼就可以搞定了：
//復(fù)制按鈕事件綁定
$("#copy").on("tap",function(){
//獲取input對象
var obj = document.getElementById("textAreas");
//選擇當前對象
obj.select();
try{
//進行復(fù)制到剪切板
if(document.execCommand("Copy","false",null)){
//如果復(fù)制成功
alert("復(fù)制成功查近！");
}else{
//如果復(fù)制失敗
alert("復(fù)制失斆减狻！");
}
}catch(err){
//如果報錯
alert("復(fù)制錯誤霜威！")
}
})
那如果是移動端 的話谈喳，就要兼容IOS，但是依然在iPhone5的10.2的系統(tǒng)中戈泼，依然顯示復(fù)制失敗婿禽，由于用戶使用率較低赏僧，兼容就做到這里，那些用戶你們就自己手動復(fù)制吧谈宛。
下面的兩種方法都可以進行復(fù)制次哈，因為核心代碼就那么幾行，先來簡單的：
$("#copy").on("tap",function(){
//獲取input對象
var obj = document.getElementById("textAreas");
//如果是ios端
if(isiOSDevice){
// 獲取元素內(nèi)容是否可編輯和是否只讀
var editable = obj.contentEditable;
var readOnly = obj.readOnly;
// 將對象變成可編輯的
obj.contentEditable = true;
obj.readOnly = false;
// 創(chuàng)建一個Range對象吆录，Range 對象表示文檔的連續(xù)范圍區(qū)域窑滞，如用戶在瀏覽器窗口中用鼠標拖動選中的區(qū)域
var range = document.createRange();
//獲取obj的內(nèi)容作為選中的范圍
range.selectNodeContents(obj);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
obj.setSelectionRange(0, 999999); //選擇范圍，確保全選
//恢復(fù)原來的狀態(tài)
obj.contentEditable = editable;
obj.readOnly = readOnly;
//如果是安卓端
}else{
obj.select();
}
try{
if(document.execCommand("Copy","false",null)){
alert("復(fù)制成功恢筝！");
}else{
alert("復(fù)制失敯馈！請手動復(fù)制撬槽！");
}
}catch(err){
alert("復(fù)制錯誤此改！請手動復(fù)制！")
}
})
下面是一個比較完整的升級版方法侄柔，和插件Clipboard.js一樣共啃，不過代碼不多，就直接拿來用好了暂题。
這個獲取的不是input對象移剪，而是需要復(fù)制的內(nèi)容。
//定義函數(shù)
window.Clipboard = (function(window, document, navigator) {
var textArea,
copy;
// 判斷是不是ios端
function isOS() {
return navigator.userAgent.match(/ipad|iphone/i);
}
//創(chuàng)建文本元素
function createTextArea(text) {
textArea = document.createElement('textArea');
textArea.innerHTML = text;
textArea.value = text;
document.body.appendChild(textArea);
}
//選擇內(nèi)容
function selectText() {
var range,
selection;
if (isOS()) {
range = document.createRange();
range.selectNodeContents(textArea);
selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
textArea.setSelectionRange(0, 999999);
} else {
textArea.select();
}
}
//復(fù)制到剪貼板
function copyToClipboard() {
try{
if(document.execCommand("Copy")){
alert("復(fù)制成功薪者！");
}else{
alert("復(fù)制失斪菘痢！請手動復(fù)制言津！");
}
}catch(err){
alert("復(fù)制錯誤攻人！請手動復(fù)制！")
}
document.body.removeChild(textArea);
}
copy = function(text) {
createTextArea(text);
selectText();
copyToClipboard();
};
return {
copy: copy
};
})(window, document, navigator);
使用函數(shù)
//使用函數(shù)
$("#copy").on("tap",function(){
var val = $("#textAreas").val();
Clipboard.copy(val);
});
這樣就實現(xiàn)了前端點擊按鈕自動復(fù)制剪貼板的功能悬槽。
version1.0 —— 2018/5/6怀吻，首次創(chuàng)建實現(xiàn)前端點擊按鈕自動復(fù)制剪貼板功能
?burning_韻七七
