js 複製文字的四種方式
純 轉載複製,非原創
原地址:http://www.cnblogs.com/xhyu/p/5370111.html
概況:
ZeroClipboard 就是常說的Flash法,通過載入一個Flash,讓其訪問系統剪貼簿來繞過絕大多數系統的許可權限制,然而體積稍微龐大些
Clipboard.js 近幾年使用較多,體積相對小,相容性可以接受,使用還比較方便。
execCommand 新興勢力,safari等主流正在努力相容,是個好東西。
setData 太老。。一般不太用,基本只適合IE
相容性:
ZeroClipboard 相容性最好,能全面相容chrome/ FireFox/ IE/ 甚至Safari 這種“友好”的瀏覽器
Clipboard.js和execCommand相容性相似,相容chrome/ FF/ IE>9/ Safari新版(不太懂Safari版本號如何算。。感覺15年以後的都可以)
setData 僅IE
體積:
ZeroClipboard 外掛較大,230KB
Clipboard.js 較小,4KB
execCommand是document方法,不用外掛直接搞
雖說體積有差,載入起來速度差不多的其實。。話說git好像就是用的ZeroClipboard
Clipboard.js 實驗經過:
直接忽略胖胖的Flash法,,先盯上的Clipboard.js,用起來著實簡單,先引用壓縮版:
<script src="dist/clipboard.min.js"></script>
新建Clipboard物件(順便:'.btn'給所有class="btn"的元素都加了監聽,其他用法可查JS)
var clipboard = new Clipboard('.btn'); //可以自己加些處理 clipboard.on('success', function(e) { console.info('Action:', e.action); console.info('Text:', e.text); console.info('Trigger:', e.trigger); e.clearSelection(); }); clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger); });
HTML裡這樣就OK了
<button class="btn" data-clipboard-target="#foo">
使用清爽,測試通過,然而專案只有一個地方用到copy,為了他加個外掛真是不優美。。於是終於找到了近期出現的execCommand()大法 (生在了好時代Orz)
execCommand()大法:
其實只需要選中要複製的內容,執行document.execCommand('copy', false, null)就好了。execCommand裡可以跑很多例如paste等方法,第一個引數是方法名,第二個是是否展示預設ui,第三個是可選引數列表,對copy來說後兩個都用不到。
根據相容不同,執行後可能的情況(涉及返回值):
1.不支援execCommand:丟擲異常 2.不支援copy方法:返回false 3.成功:true
因此框架可以這樣寫:
copy_target.focus(); copy_target.select(); try{ if(document.execCommand('copy', false, null)){ //success info } else{ //fail info } } catch(err){ //fail info }
給使用者的反饋用的jquery的tooltip,然後寫成一個function就是如下:
function copy(copytargetid,copybtnid){ var cpt = document.getElementById(copytargetid); var cpb = document.getElementById(copybtnid); $(cpt).focus(); $(cpt).select(); try{ if(document.execCommand('copy', false, null)){ $(cpb).tooltip({title:"copied!", placement: "bottom", trigger: "manual"}); $(cpb).tooltip('show'); cpb.onmouseout=function(){$(cpb).tooltip('destroy')}; } else{ $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"}); $(cpb).tooltip('show'); cpb.onmouseout=function(){$(cpb).tooltip('destroy')}; } } catch(err){ $(cpb).tooltip({title:"failed!", placement: "bottom", trigger: "manual"}); $(cpb).tooltip('show'); cpb.onmouseout=function(){$(cpb).tooltip('destroy')}; } }
用的時候直接
<button id="cpbtn" onclick="copy('cptar', 'cpbtn')">copy</button>
即可
到此還沒有結束。。。
專案用的vue,於是需要做成vue的method,又是用coffee寫的,改了下語法,在初次渲染的html中測試通過了,然後。。。我的copy妞是個vex模態框。。button是寫在vex.dialog.open的message裡的,message是個字串,彈窗時候強注一段html。而且vue函式是隻在渲染階段繫結,所以。。。初次vue渲染的時候不會識別到字串中的v-on:click,無法繫結。。於是不能從button元素直接調。
決定搞一個隱藏input中繼一下,最後終於用比較優美的姿勢實現了。。。(上次是直接在message裡強行注入script。。。涉及script巢狀還加了個轉義<\/script>,結果醜的一bi。。)
button裡 onclick="document.getElementById('copyrelay').select()",input裡@select('copy(...)')(@是vue的v-on:的縮寫)。
終於測試一切完好,天真的以為加個display: none就大功告成。。結果發現跪了
原來是display:none的元素並不能被select。。
同樣的,也不能focus, change等等,於是順著onerror等事件挨個試了一遍。。發現貌似只有onclick work。。。
另外還順帶試了一下,<input type="hidden"/>也是不能用那些事件;即使正常顯示元素,value=""的話也不能觸發select。
當然,至於是.select()沒有成功,還是元素沒有觸發select事件,還是沒有觸發v-on:select,有待確定,有時間可以試一下。
Anyway,最終程式碼:
<input id="copyrelay" style="display: none;" @click=“copy('cptg','cpbt')”/> <!--vex.dialog.open的message中:--> <input id="cpbt" type="button" onclick="document.getElementById('copyrelay').click()"/> <input id="cptg" value="copy test" readonly/>
method中的copy函式如上所提,轉為coffee。
我這個偽frontend太弱了。。還是希望給貴司多搞點貢獻。。。
感謝lrx,lyy,P8,zzl,xxm犇們Orz。。。
就這樣。
相關推薦
mongodb shell 執行js指令碼的四種方式
1. 互動式 mongo shell大部分的 mongodb 教程,在第一章都會講解這種方式。mongo 127.0.0.1:27017use testdb.users.findOne()2. mongo --eval 執行一段指令碼不進入互動模式,直接在 OS 的命令列下執
js 複製文字的四種方式
純 轉載複製,非原創 原地址:http://www.cnblogs.com/xhyu/p/5370111.html 概況: ZeroClipboard 就是常說的Flash法,通過載入一個Flash,讓其訪問系統剪貼簿來繞過絕大多數系統的許可權限制,然而體積稍
js取陣列最大值的四種方式
var arr = [7,2,0,-3,5];1.apply()應用某一物件的一個方法,用另一個物件替換當前物件 var max = Math.max.apply(null,arr);console.log(max)由於max()裡面引數不能為陣列,所以藉助apply(funtion,args)方法呼叫Ma
JS 基礎篇(一):建立物件的四種方式
目錄: 一、宣告一個物件的語法 直接宣告一個物件: var person1 = { name : "Jie", age: 23, say: function(){
四十一、瀑布流佈局(js,jquery,css3三種方式)
一、 簡介 1. 實現瀑布流的方法: JavaScript 原生方法、 jquery 方法、 css3 的多欄佈局 二、js 原生方法實現 -- 思想 1. 瀑布流的特點: 等寬不等高 <
java中複製文字檔案的方式我總結為14種(按字元讀取4中,按位元組讀取8種!??)
java中複製檔案的方式 如果按照字元來讀取的話,可以有4種,基本的2種,高效的2種,高效特殊的1種 第0種: public class CopyFileDemo { public static void main(String[] args) throws Except
HTML隱藏文字框的四種方式
1、<input type="hidden" value=""></input>對所有的文字框都起作用(隱藏域,多用於存資料) 2、<input type="text" value="" style="display:none">
6- js 函式的四種呼叫方式
6. 函式的四種呼叫方式 函式有下列呼叫模式 函式呼叫模式 方法呼叫模式 構造器模式 上下文模式 1. 函式呼叫 模式 要呼叫,就肯定要先定義,函式的定義方式: 宣告式: function fuc() {} 表示式式: var
js宣告陣列的四種方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head>
angular創建自定義指令的四種方式
htm mil 成功 評論 utf-8 例如 angularjs size 限制 angular除了內置的部分指令,還可以通過.directive來自定義指令。要調用自定義指令,HTML 元素上需要添加自定義指令名。使用駝峰法來命名一個指令:nsHeader,在調用時使
java讀取配置文件常用的四種方式
ng- wrap play 獲取值 position trac resource 基於 tom 配置文件 放置在src下面 obj.propertiesclassName=com.store.order.dao.impl.OrderDaoImpl方式一@Test p
實現多線程的四種方式
註意 ger interrupt exception future pool port pre repl Java多線程實現方式主要有四種:繼承Thread類、實現Runnable接口、實現Callable接口通過FutureTask包裝器來創建Thread線程、使用Exe
VirtualBox虛擬機網絡設置(四種方式)
總結 virtual 上網 模式 頁面 進行 虛擬機上網 conf ans VirtualBox的提供了四種網絡接入模式,它們分別是: 1、NAT 網絡地址轉換模式(NAT,Network Address Translation) 2、Bridged Adap
C#批量插入數據到Sqlserver中的四種方式 - 轉
大數 sqlserve 情況下 時間 void tor schema ase ble 先創建一個用來測試的數據庫和表,為了讓插入數據更快,表中主鍵采用的是GUID,表中沒有創建任何索引。GUID必然是比自增長要快的,因為你生成一個GUID算法所花的時間肯定比你從數據表中重新
Map集合遍歷的四種方式理解和簡單使用-----不能for循環遍歷
src 理解 version class post oid 循環 2017年 col ~Map集合是鍵值對形式存儲值的,所以遍歷Map集合無非就是獲取鍵和值,根據實際需求,進行獲取鍵和值 1:無非就是通過map.keySet()獲取到值,然後根據鍵獲取到值 f
python全棧開發【補充】單例模式的四種方式
實現 創建 初始 user 它的 pooled asa args 三種 一、什麽是單例模式 保證一個類只有一個實例,並提供一個訪問它的全局訪問點 二、優點 對唯一實例的受控訪問 單利相當於全局變量,但防止了命名空間被汙染 與單利模式功能相似的概念:全局變量、靜態變量
讓外部網絡訪問K8S service的四種方式
width 轉發規則 方案 核心 方式 基於 upload 規則 clas 本文基於kubernetes 1.5.2版本編寫 kube-proxy+ClusterIP kubernetes版本大於或者等於1.2時,配置: 修改master的/etc/kubernetes/p
shiro進行權限控制的四種方式
shiro ```我們使用shiro進行權限控制 有以下幾種方式 1. URL攔截權限控制:基於filter過濾器實現 我們在spring配置文件中配置shiroFilter時配置 <!--指定URL級別攔截策略 --> <
C# 字符串拼接性能探索 c#中+、string.Concat、string.Format、StringBuilder.Append四種方式進行字符串拼接時的性能
ant runt info lap tel ole 3.2 ons empty 本文通過ANTS Memory Profiler工具探索c#中+、string.Concat、string.Format、StringBuilder.Append四種方式進行字符串拼接時的性能。
.net cs後臺刷新aspx頁面的四種方式
request document HR direct string quest rec 方式 doc 一:Response.Redirect(Request.Url.ToString()); 二:Response.Write("<script language=jav