前端實現複製功能無需外掛(不限於文字框且有選中操作)
好的外掛能夠在效率和相容性上為開發提供很大幫助,但是在實際專案中還是需要根據需求來確定是否使用
“複製”這個功能屬於專案中常見需求,很多人包括我一開始都會選擇使用clipboard這個外掛,針對不同前端框架又衍生了新的升級外掛,比如vue-clipboard,最近專案中需要實現這個功能,總感覺為此引入一個外掛不值得,雖然沒多大,所以去看了下原始碼,發現核心程式碼其實很簡單,更多的是做了各種平臺框架下的處理,比如就vue下就通過 自定義指令、事件繫結兩種方法實現複製。所以提取其中核心程式碼即可滿足需求
documentCopy(ele) { if (!(ele !== undefined && ele !== null)) return Promise.resolve(0); // 如果支援 select 就使用 if (ele.select) { ele.select(); } else { let selection = window.getSelection(); let createRange = document.createRange(); createRange.selectNodeContents(ele); selection.removeAllRanges(); selection.addRange(createRange); } return new Promise((resolve) => { try { if (document.execCommand('copy', false, null)) { document.execCommand("Copy"); resolve(1); } else { resolve(0); } } catch (err) { resolve(0); } }); },
相關推薦
前端實現複製功能無需外掛(不限於文字框且有選中操作)
好的外掛能夠在效率和相容性上為開發提供很大幫助,但是在實際專案中還是需要根據需求來確定是否使用 “複製”這個功能屬於專案中常見需求,很多人包括我一開始都會選擇使用clipboard這個外掛,針對不同前端框架又衍生了新的升級外掛,比如vue-clipboard,最近專案中需要
前端實現複製功能
很多情況下,前端可能會遇到實現複製的功能。這裡用的方法是target.find('input').select(); var flag = document.execCommand("Cut","fal
ZeroClipboard外掛實現複製功能
Zero Clipboard 利用透明的Flash讓其漂浮在複製按鈕之上,這樣其實點選的不是按鈕而是Flash ,這樣將需要的內容傳入Flash,再通過Flash的複製功能把傳入的內容複製到剪貼簿。 但是值得注意的是官方介紹中已明確表態說這個外掛不
clipboard.js實現複製功能的示例程式碼
<div class="coupon-text-wrap"> <span class="coupon-text" id="coupon-text" > 123456 </span> <span class="coupon
Vue中結合clipboard實現複製功能
首先現在Vue中引入clipboard npm install clipboard --save 在需要使用的元件中import 引入clipboard import Clipboard from 'clipboard'; clipboard的實際使用 不論是單按鈕複
Skyline Terra Explorer6.6彈出視窗實現複製功能
前段時間繼續下來的基於Skyline的B/S專案,是基於Terra Explorer6.6實現的。專案中涉及到基於三維模型查詢裝置編碼等操作,從使用者友好角度來講,查詢到的裝置編碼應該要支援複製,方便使用者基於編碼的二次查詢和操作。 1. Terra Explorer彈出視窗限制 通常來說,在瀏覽器中複製
原生Js實現複製功能的方法總結,execCommand和clipboardData的使用
原生Js實現複製(Copy)的兩種方法,一種是利用 clipboardData,另外一種則是用 execCommand(),今天將統一講解一下關於他們的使用方法。 document.execCommand 當一個HTML文件切換到設計模式(designMode)時,文件物件
MongoDB基礎教程系列--第八篇 MongoDB 副本集實現複製功能
https://www.cnblogs.com/liruihuan/p/6709741.html 為什麼用複製 為什麼要使用複製呢?如果我們的資料庫只存在於一臺伺服器,若這臺伺服器宕機了,那對於我們資料將會是災難,當然這只是其中一個原因,若資料量非常大,讀寫操作勢必會影響資料庫的效能,這時候
vue實現複製功能(專案使用)
安裝依賴 npm install --save vue-clipboard2 用法: import Vue import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard) Demo: <temp
簡單的實現購物車功能,還有不到位的地方,加油!!!
要求: 1 import time 2 goods = [{"huawei":1000},{"apple":10},{"banana":23},{"pen":140},{"wanju":78}, 3 {"book":200},{"taiden
JavaScript 實現複製功能
<script> function copy_order() { let order_id_number = document.getElementsByClassName("order_id_number")[0].innerText.trim();
點選滑鼠實現複製功能,相容主流瀏覽器
1.有一個需求,點選滑鼠左鍵,複製連結,可以將該連結貼上,實現一個簡單的複製貼上功能 2.程式碼實現 (1)HTML程式碼 <!DOCTYPE html> <html> <head> <title></title> &
頁面上點選按鈕實現複製功能
引入clipboard.js; htm程式碼: <p class="link-div-p1">優惠券連結:<span id="link-span">http://</span></p> <!--<span sty
使用clipboard.js實現複製功能
最近在開發中,使用原生js複製時,發現在360 7.1的低版本中無法實現程式碼的複製,隨後便網上找了外掛實現複製功能,檢驗後,發現在低版本也支援demo:<input id="contents" type="text" value="" style="position:
JavaScript實現複製功能
Zero Clipboard的使用方法 注意:由於是基於Flash實現,Flash出於安全,需要在Web容器(例如Apache、Tomcat)中才能執行,直接開啟Flash將不會被載入,按鈕類似假死現象,網上說右鍵Flash設定將ZeroClipboard.swf新增到受信任位置,感覺應該是行的,我試了
使用clipboard.js實現複製功能的示例程式碼
<td>電話號碼</td> <td> <span class="screenTel" id="callNumber"></span> <span class="tel
網頁中實現複製功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="ht
使用Zeroclipboard實現複製功能
網頁開發中需要實現複製功能時,在網上找到的諸多簡單的程式碼(document.execCommand("Copy"))似乎大多數只能在IE下實現,並不能在Chrome等當下主流瀏覽器下實現。要在這些主流瀏覽器實現複製功能,就可以用到下面介紹的方法:使用一個跨瀏
jquery實現複製功能
外掛地址:http://download.csdn.net/download/ledzcl/10205387js+swf實現,檔案需要同時引入。 ZeroClipboard提供一個透明的flash,用於和剪下版互動,當點選頁面上的“複製”按鈕時,將需要的內容傳入Flash,再
JS實現複製功能,相容各大主流瀏覽器複製神器 ZeroClipboard
以下是完整版程式碼: <!DOCTYPE html> <html> <head> <title>Zero Clipboard 測試</title> <meta charset="utf-8"> <