每日 30 秒 ? 復制內容到剪貼板

Pandaaa 發布于2019-08-23 15:55 / 1302人閱讀

簡介

剪貼板、復制、兼容

復制內容到剪貼板 是前端開發過程中會經常遇到的一個需求，大部分同學開發時往往會直接打開搜索框開始尋找別人寫好的組件庫，而聰明的同學會開始思考問題：

產品的使用場景是什么？

是否需要兼容很多瀏覽器？

是否在項目中需要頻繁使用？

是否需要使用第三方庫額外提供的功能？

當產品使用場景并不大和復雜時，可以使用這段 復制內容到剪貼板 代碼：

// 該源碼來自于 https://30secondsofcode.org
const copyToClipboard = str => {
    const el = document.createElement("textarea");
    el.value = str;
    el.setAttribute("readonly", "");
    el.style.position = "absolute";
    el.style.left = "-9999px";
    document.body.appendChild(el);

    const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;

    el.select();
    document.execCommand("copy");
    document.body.removeChild(el);

    if (selected) {
        document.getSelection().removeAllRanges();
        document.getSelection().addRange(selected);
    }
};

代碼分析

瀏覽器提供了一個原生方法 document.execCommand("copy") 來實現 復制內容到剪貼板，但是它有一個使用前提“需要選擇文本框或者輸入框時”，所以先創建一個 textarea 文本框并通過定位讓它不顯示在屏幕里：

const el = document.createElement("textarea");
el.value = str;
el.style.position = "absolute";
el.style.left = "-9999px";
document.body.appendChild(el);

對創建好的 textarea 元素進行選中并使用復制里面的文本內容，最后移除掉 textarea 元素。

el.select();
document.execCommand("copy");
document.body.removeChild(el);

為什么跳過了一大段代碼了？

其實到此為止就已經實現好了 復制內容到剪貼板，跳過代碼分別是對兩個場景的優化，可以根據產品開發的場景來選著是否使用這兩段代碼：

場景是否包括移動設備

是否頁面可以讓用戶選中文本

移動設備優化

移動設備上有一個問題 “當文本框被選中時，會彈出虛擬鍵盤” 會導致頁面出現閃爍，如果手機響應較慢甚至可以看到虛擬鍵盤彈出和消失的過程。這段代碼的點睛之筆之一在于把輸入框設置為只讀：

el.setAttribute("readonly", "");

小技巧：利用只讀屬性來防止彈出虛擬鍵盤。

可選中文本優化

代碼的另外一處點睛之筆在于：如果用戶選中了某段文字后點擊復制內容到剪貼板的復制操作這段選中的文字就會消失掉，肥肥的大拇指在手機屏幕像選著文本內容一直是一件挺讓人不舒服的操作，選中文字的消失十分影響用戶體驗。

我們可以利用 document.getSelection 一系列光標選中 API 來幫助我們先記錄下用戶之前所選的文字對象：

const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;

再進行完復制操作后對 selected 進行判斷，并恢復先前記錄下用戶之前所選的文字對象：

if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
}

一起成長

在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長。

如果您想讓更多人看到文章可以點個點贊。

如果您想激勵小二可以到 Github 給個 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來自 PushMeTop

GPU云服務器云服務器 js復制到剪貼板剪貼板內容云服務器開機要開30秒復制網頁內容

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102548.html

關于css兼容性問題及一些常見問題匯總

摘要：解決辦法添加復制內容到剪貼板一行右側第一個元素有雙邊距一行左側第一個元素有雙邊距在，下，自身沒浮動，但是的內容有浮動，下邊就會產生一個間隙解決辦法給加浮動給加注意當下最小高度問題，和的間隙問題共存的時候，給加浮動才能解決。目前主流瀏覽器的兼容性做的都比較好了，本文主要針對IE6，7的不兼容問題進行解決。 1.圓盤時鐘有浮動存在時，計算一定要精確，不要讓內容的寬高超出我們所設置的寬高，IE6下...

seanlook 2019-04-23 11:43 評論0 收藏0
《HelloGitHub》第 66 期

摘要：功能齊全支持考勤會議管理云盤等，適用于企業協同辦公支付工具庫，輕松完成支付模塊開發。包含訓練好的模型和微服務，啟動后可直接通過接口調用基于圖像識別的自動化框架，支持吃雞類射擊類類等游戲類型。 .markdown-body{word-break:break-word;line-height:1.75;font-weight:400;font-size:15px;overflow-x:hidd...

番茄西紅柿 2021-09-29 09:35 評論0 收藏2637
每日 30 秒 ? CSV 表格數據轉換 JSON 對象

簡介數組、CSV、表格、工具 showImg(https://segmentfault.com/img/bVbp3L5?w=900&h=500); 我們之前的兩期數組轉 CSV 表格數據和 JSON 對象數組轉換 CSV 表格數據中學習了轉化為 CSV 表格數據的代碼片段，今天就講講如何把 CSV 表格數據轉換為 JSON 對象： // 該源碼來自于 https://30secondso...

livem 2019-08-26 18:18 評論0 收藏0
每日 30 秒 ? 判斷是否為頁面底部

showImg(https://segmentfault.com/img/remote/1460000018771130?w=900&h=500); 簡介分頁、優化、可視區域、無限加載寫前端頁面時最經常遇到的開發需求之一就是渲染后端數據返回的數據對象，當數據對象數量極多的時候便需要進行分頁。常見的分頁方式有三種：在頁面底部生成上一頁、下一頁、頁面列表按鈕。用戶可以很直接的選擇...

callmewhy 2019-08-26 13:36 評論0 收藏0
每日 30 秒 ? 大家一起被捕吧

showImg(https://segmentfault.com/img/remote/1460000018793640?w=900&h=500); 簡介安全、注入攻擊、XSS 13歲女學生被捕：因發布 JavaScript 無限循環代碼。這條新聞是來自 2019年3月10日很多同學匆匆一瞥便滑動屏幕去看下一條消息了，并沒有去了解這段代碼是什么，怎么辦才能防止這個問題。事情發生后為了抗議日本...

lbool 2019-08-23 16:11 評論0 收藏0