公司項目之前一個需求,需要用戶一進頁面觸摸手機後就自動幫他複製一個串碼。。wtf? 還有這種操作?好吧,需求出來了,那就想實現吧。。。 用戶進來觸摸手機 會產生 三個事件,我們肯定不能直接寫這三個事件去複製,這樣會影響它的預設事件,我們還要做的神不知鬼不覺。。。 所以,在函數內部我們就需要用到下麵代 ...
公司項目之前一個需求,需要用戶一進頁面觸摸手機後就自動幫他複製一個串碼。。wtf? 還有這種操作?好吧,需求出來了,那就想實現吧。。。
用戶進來觸摸手機 會產生touchstart, touchmove, touchend
三個事件,我們肯定不能直接寫這三個事件去複製,這樣會影響它的預設事件,我們還要做的神不知鬼不覺。。。
所以,在函數內部我們就需要用到下麵代碼
// part1
var t = document.createElement('textarea'); // 先生成一個文本框
t.id = "WpCopy";
t.value="需要複製的東西"; // value
t.setAttribute('readOnly','readOnly');
t.setAttribute('style',"font-size: 12pt; border: 0px; padding: 0px; margin: 0px; position: absolute; left: -9999px; top: 0px;"); //讓他消失在視野範圍內
document.getElementsByTagName('body')[0].appendChild(t); // 添加到頁面中
var WpCopy = document.getElementById('WpCopy'); // 顯示的聲明
WpCopy.focus(); // 獲取焦點
在這裡我們創建一個隱藏的可以賦值的文本框,下一步我們就需要在事件中判斷並且讓這個文本框里的值跑到用戶的粘貼板上了。。。
// part2
// 聲明一個事件函數
function touch (event) {
var event = event || window.event,
link = ' ';
switch(event.type){
case "touchstart":
link = event.target; //在觸摸開始的時候把觸摸對象賦值給之前聲明的變數保存下來
break;
case "touchend":
WpCopy.setSelectionRange(0, WpCopy.value.length); // 觸摸結束時候讓文本框全選
document.execCommand('copy', true); // 並且複製到粘貼板
if(link != '') {
link.click(); // 這一步判斷如果用戶是正常點擊頁面元素,繼續讓他執行
}
break;
case "touchmove":
link = ""; // 如果用戶是觸屏移動則讓變數為空,不會觸發觸摸開始元素的原有事件
break;
}
}
到這一步基本可以完成需求了,下麵將這兩段代碼整合成一個函數方法,方便頁面調用
function loadCopy (value){
$(document).on('touchstart',touch);
$(document).on('touchmove',touch);
$(document).on('touchend',touch);
// 放入part1, part2;
}
// 在需要的頁面調用loadCopy 即可
這麼一個需求其實也就是execCommand
複製的應用。。。代碼寫得不好希望指出