摘要:原文鏈接最近一個(gè)活動(dòng)頁(yè)面中有一個(gè)小需求,用戶點(diǎn)擊或者長(zhǎng)按就可以復(fù)制內(nèi)容到剪貼板,記錄一下實(shí)現(xiàn)過(guò)程和遇到的坑。完整代碼如下復(fù)制成功總結(jié)以上就是關(guān)于如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板,附上幾個(gè)鏈接兼容性
原文鏈接:https://github.com/axuebin/ar...
最近一個(gè)活動(dòng)頁(yè)面中有一個(gè)小需求,用戶點(diǎn)擊或者長(zhǎng)按就可以復(fù)制內(nèi)容到剪貼板,記錄一下實(shí)現(xiàn)過(guò)程和遇到的坑。
常見方法查了一下萬(wàn)能的Google,現(xiàn)在常見的方法主要是以下兩種:
第三方庫(kù):clipboard.js
原生方法:document.execCommand()
分別來(lái)看看這兩種方法是如何使用的。
clipboard.js這是clipboard的官網(wǎng):https://clipboardjs.com/,看起來(lái)就是這么的簡(jiǎn)單。
引用直接引用:
包: npm install clipboard --save ,然后 import Clipboard from "clipboard";
使用 從輸入框復(fù)制現(xiàn)在頁(yè)面上有一個(gè) 標(biāo)簽,我們需要復(fù)制其中的內(nèi)容,我們可以這樣做:
import Clipboard from "clipboard"; const btnCopy = new Clipboard("btn");
注意到,在 標(biāo)簽中添加了一個(gè) data-clipboard-target 屬性,它的值是需要復(fù)制的 的 id,顧名思義是從整個(gè)標(biāo)簽中復(fù)制內(nèi)容。
直接復(fù)制有的時(shí)候,我們并不希望從 中復(fù)制內(nèi)容,僅僅是直接從變量中取值。如果在 Vue 中我們可以這樣做:
import Clipboard from "clipboard"; const btnCopy = new Clipboard("btn"); this.copyValue = "hello world";事件
有的時(shí)候我們需要在復(fù)制后做一些事情,這時(shí)候就需要回調(diào)函數(shù)的支持。
在處理函數(shù)中加入以下代碼:
// 復(fù)制成功后執(zhí)行的回調(diào)函數(shù) clipboard.on("success", function(e) { console.info("Action:", e.action); // 動(dòng)作名稱,比如:Action: copy console.info("Text:", e.text); // 內(nèi)容,比如:Text:hello word console.info("Trigger:", e.trigger); // 觸發(fā)元素:比如: e.clearSelection(); // 清除選中內(nèi)容 }); // 復(fù)制失敗后執(zhí)行的回調(diào)函數(shù) clipboard.on("error", function(e) { console.error("Action:", e.action); console.error("Trigger:", e.trigger); });小結(jié)
文檔中還提到,如果在單頁(yè)面中使用 clipboard ,為了使得生命周期管理更加的優(yōu)雅,在使用完之后記得 btn.destroy() 銷毀一下。
clipboard 使用起來(lái)是不是很簡(jiǎn)單。但是,就為了一個(gè) copy 功能就使用額外的第三方庫(kù)是不是不夠優(yōu)雅,這時(shí)候該怎么辦?那就用原生方法實(shí)現(xiàn)唄。
document.execCommand()方法先看看這個(gè)方法在 MDN 上是怎么定義的:
which allows one to run commands to manipulate the contents of the editable region.
意思就是可以允許運(yùn)行命令來(lái)操作可編輯區(qū)域的內(nèi)容,注意,是可編輯區(qū)域。
定義bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)
方法返回一個(gè) Boolean 值,表示操作是否成功。
aCommandName :表示命令名稱,比如: copy, cut 等(更多命令見命令);
aShowDefaultUI:是否展示用戶界面,一般情況下都是 false;
aValueArgument:有些命令需要額外的參數(shù),一般用不到;
兼容性這個(gè)方法在之前的兼容性其實(shí)是不太好的,但是好在現(xiàn)在已經(jīng)基本兼容所有主流瀏覽器了,在移動(dòng)端也可以使用。
使用 從輸入框復(fù)制現(xiàn)在頁(yè)面上有一個(gè) 標(biāo)簽,我們想要復(fù)制其中的內(nèi)容,我們可以這樣做:
const btn = document.querySelector("#btn"); btn.addEventListener("click", () => { const input = document.querySelector("#demoInput"); input.select(); if (document.execCommand("copy")) { document.execCommand("copy"); console.log("復(fù)制成功"); } })其它地方復(fù)制
有的時(shí)候頁(yè)面上并沒(méi)有 標(biāo)簽,我們可能需要從一個(gè) 還記得在 execCommand() 方法的定義中提到,它只能操作可編輯區(qū)域,也就是意味著除了 、 這樣的輸入域以外,是無(wú)法使用這個(gè)方法的。 這時(shí)候我們需要曲線救國(guó)。 算是曲線救國(guó)成功了吧。在使用這個(gè)方法時(shí),遇到了幾個(gè)坑。 在Chrome下調(diào)試的時(shí)候,這個(gè)方法時(shí)完美運(yùn)行的。然后到了移動(dòng)端調(diào)試的時(shí)候,坑就出來(lái)了。 對(duì),沒(méi)錯(cuò),就是你,ios。。。 點(diǎn)擊復(fù)制時(shí)屏幕下方會(huì)出現(xiàn)白屏抖動(dòng),仔細(xì)看是拉起鍵盤又瞬間收起 知道了抖動(dòng)是由于什么產(chǎn)生的就比較好解決了。既然是拉起鍵盤,那就是聚焦到了輸入域,那只要讓輸入域不可輸入就好了,在代碼中添加 input.setAttribute("readonly", "readonly"); 使這個(gè) 是只讀的,就不會(huì)拉起鍵盤了。 無(wú)法復(fù)制 這個(gè)問(wèn)題是由于 input.select() 在ios下并沒(méi)有選中全部?jī)?nèi)容,我們需要使用另一個(gè)方法來(lái)選中內(nèi)容,這個(gè)方法就是 input.setSelectionRange(0, input.value.length);。 完整代碼如下: 以上就是關(guān)于JavaScript如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板,附上幾個(gè)鏈接: execCommand MDN execCommand兼容性 clipboard.js 文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/92982.htmlconst btn = document.querySelector("#btn");
btn.addEventListener("click",() => {
const input = document.createElement("input");
document.body.appendChild(input);
input.setAttribute("value", "聽說(shuō)你想復(fù)制我");
input.select();
if (document.execCommand("copy")) {
document.execCommand("copy");
console.log("復(fù)制成功");
}
document.body.removeChild(input);
})
const btn = document.querySelector("#btn");
btn.addEventListener("click",() => {
const input = document.createElement("input");
input.setAttribute("readonly", "readonly");
input.setAttribute("value", "hello world");
document.body.appendChild(input);
input.setSelectionRange(0, 9999);
if (document.execCommand("copy")) {
document.execCommand("copy");
console.log("復(fù)制成功");
}
document.body.removeChild(input);
})
總結(jié)
摘要:方法可用的屏幕高度窗口可用的屏幕寬度瀏覽器表示的顏色位數(shù)用戶瀏覽器表示的顏色位數(shù)屏幕的像素高度屏幕的像素寬度對(duì)象返回前一個(gè)返回下一個(gè)返回某個(gè)具體頁(yè)面 事件 事件:鼠標(biāo)事件,鍵盤事件,進(jìn)度事件,表單事件,觸摸事件,拖拉事件,其他常見事件.GlobalEventHandler接口DOM(文檔對(duì)象模型)是JavaScript操作網(wǎng)頁(yè)的接口,將網(wǎng)頁(yè)轉(zhuǎn)為一個(gè)樹狀結(jié)構(gòu),所有的節(jié)點(diǎn)都有借口. DO...
摘要:取消默認(rèn)的復(fù)制事件被復(fù)制的文字等下插入防知乎掘金復(fù)制一兩個(gè)字則不添加版權(quán)信息超過(guò)一定長(zhǎng)度的文字就添加版權(quán)信息作者鏈接來(lái)源掘金著作權(quán)歸作者所有。以上參考資料高程操作剪貼板網(wǎng)頁(yè)上如何實(shí)現(xiàn)禁止復(fù)制粘貼以及如何破解原生實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...
摘要:取消默認(rèn)的復(fù)制事件被復(fù)制的文字等下插入防知乎掘金復(fù)制一兩個(gè)字則不添加版權(quán)信息超過(guò)一定長(zhǎng)度的文字就添加版權(quán)信息作者鏈接來(lái)源掘金著作權(quán)歸作者所有。以上參考資料高程操作剪貼板網(wǎng)頁(yè)上如何實(shí)現(xiàn)禁止復(fù)制粘貼以及如何破解原生實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...
摘要:取消默認(rèn)的復(fù)制事件被復(fù)制的文字等下插入防知乎掘金復(fù)制一兩個(gè)字則不添加版權(quán)信息超過(guò)一定長(zhǎng)度的文字就添加版權(quán)信息作者鏈接來(lái)源掘金著作權(quán)歸作者所有。以上參考資料高程操作剪貼板網(wǎng)頁(yè)上如何實(shí)現(xiàn)禁止復(fù)制粘貼以及如何破解原生實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...
摘要:配合實(shí)現(xiàn)上傳進(jìn)度條配合實(shí)現(xiàn)上傳進(jìn)度條,一直以為是無(wú)法做到進(jìn)度條一個(gè)動(dòng)態(tài)的功能,原來(lái)還是自己的知識(shí)面不夠,看到了擴(kuò)展相關(guān)的一些文章,利用擴(kuò)展達(dá)到了動(dòng)態(tài)實(shí)現(xiàn)效果。根據(jù)找到相關(guān)的文章自己并在此基礎(chǔ)上做了一些小修改。 PHP配合apc實(shí)現(xiàn)上傳進(jìn)度條PHP配合apc實(shí)現(xiàn)上傳進(jìn)度條, 一直以為PHP是無(wú)法做到進(jìn)度條一個(gè)動(dòng)態(tài)的功能,原來(lái)還是自己的知識(shí)面不夠,看到了apc擴(kuò)展相關(guān)的一些文章,利用apc...
閱讀 2398·2021-11-23 09:51
閱讀 1209·2021-11-22 13:54
閱讀 3422·2021-09-24 10:31
閱讀 1066·2021-08-16 10:46
閱讀 3619·2019-08-30 15:54
閱讀 700·2019-08-30 15:54
閱讀 2886·2019-08-29 17:17
閱讀 3154·2019-08-29 15:08