亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

每日 30 秒 ? 復(fù)制內(nèi)容到剪貼板

Pandaaa / 1350人閱讀

簡(jiǎn)介 
剪貼板、復(fù)制、兼容

復(fù)制內(nèi)容到剪貼板 是前端開發(fā)過程中會(huì)經(jīng)常遇到的一個(gè)需求，大部分同學(xué)開發(fā)時(shí)往往會(huì)直接打開搜索框開始尋找別人寫好的組件庫(kù)，而聰明的同學(xué)會(huì)開始思考問題：

產(chǎn)品的使用場(chǎng)景是什么？

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

是否在項(xiàng)目中需要頻繁使用？

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

當(dāng)產(chǎn)品使用場(chǎng)景并不大和復(fù)雜時(shí)，可以使用這段 復(fù)制內(nèi)容到剪貼板 代碼：

// 該源碼來自于 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);
    }
};
代碼分析

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

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

對(duì)創(chuàng)建好的 textarea 元素進(jìn)行選中并使用復(fù)制里面的文本內(nèi)容，最后移除掉 textarea 元素。

el.select();
document.execCommand("copy");
document.body.removeChild(el);
為什么跳過了一大段代碼了？

其實(shí)到此為止就已經(jīng)實(shí)現(xiàn)好了 復(fù)制內(nèi)容到剪貼板，跳過代碼分別是對(duì)兩個(gè)場(chǎng)景的優(yōu)化，可以根據(jù)產(chǎn)品開發(fā)的場(chǎng)景來選著是否使用這兩段代碼：

場(chǎng)景是否包括移動(dòng)設(shè)備

是否頁(yè)面可以讓用戶選中文本

移動(dòng)設(shè)備優(yōu)化

移動(dòng)設(shè)備上有一個(gè)問題 “當(dāng)文本框被選中時(shí)，會(huì)彈出虛擬鍵盤” 會(huì)導(dǎo)致頁(yè)面出現(xiàn)閃爍，如果手機(jī)響應(yīng)較慢甚至可以看到虛擬鍵盤彈出和消失的過程。這段代碼的點(diǎn)睛之筆之一在于把輸入框設(shè)置為只讀：

el.setAttribute("readonly", "");
小技巧：利用只讀屬性來防止彈出虛擬鍵盤。
可選中文本優(yōu)化

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

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

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

再進(jìn)行完復(fù)制操作后對(duì) selected 進(jìn)行判斷，并恢復(fù)先前記錄下用戶之前所選的文字對(duì)象：

if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
}
一起成長(zhǎng) 
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

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

本文原稿來自 PushMeTop

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/102548.html

相關(guān)文章

  • 關(guān)于css兼容性問題及一些常見問題匯總

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

    seanlook 評(píng)論0 收藏0

  • 《HelloGitHub》第 66 期

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

    番茄西紅柿 評(píng)論0 收藏2637

  • 每日 30 秒 ? CSV 表格數(shù)據(jù)轉(zhuǎn)換 JSON 對(duì)象

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

    livem 評(píng)論0 收藏0

  • 每日 30 秒 ? 判斷是否為頁(yè)面底部

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

    callmewhy 評(píng)論0 收藏0

  • 每日 30 秒 ? 大家一起被捕吧

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

    lbool 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<