js 操作剪貼板

plokmju88 發(fā)布于2019-08-23 16:23 / 1602人閱讀

摘要：操作剪貼板官方說明通過可以操作剪貼板的復(fù)制剪切粘貼用到的方法和元素元素方法選中輸入框中的所有文本選中輸入框中的部分文本對選中的文本進(jìn)行復(fù)制剪切粘貼操作實(shí)現(xiàn)原理是通過操作輸入框，只能操作輸入框，不能操作其它元素。

js 操作剪貼板

MDN 官方說明： https://developer.mozilla.org...

通過 js 可以操作剪貼板的 復(fù)制 剪切粘貼

用到的方法和元素

DOM元素

js 方法

// 選中輸入框中的所有文本
inputElement.select()

// 選中輸入框中的部分文本
inputElement.setSelectionRange(start, end)

// 對選中的文本進(jìn)行 復(fù)制 / 剪切 / 粘貼 操作
document.execCommand("copy/cut/paste")

實(shí)現(xiàn)原理

是通過 js 操作 textarea input 輸入框，只能操作輸入框，不能操作其它元素。
所有的 復(fù)制／剪切／粘貼 都是要在選中輸入框中的文本之后，才進(jìn)行操作的。

具體例子

寫個(gè)例子展示一下

HTML

測試內(nèi)容：
ABCDEFGHIJKLMNOPQRSTUVWXYZ

js 就直接在 console 中進(jìn)行調(diào)試了

用 shift + enter 在 console 中換行輸入指令

// 選中文本
var text = document.querySelector("#text");
text.focus();
text.setSelectionRange(3,13);

// 操作文本
document.execCommand("cut")

選中后的樣子

執(zhí)行剪切操作后，再手動粘貼到下面的輸入框中

就是這樣了。

云服務(wù)器 GPU云服務(wù)器 js剪貼板手機(jī) js復(fù)制到剪貼板 js獲取剪貼板word數(shù)據(jù) 剪貼板

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102972.html

相關(guān)文章

Clipboard.js：不用Flash實(shí)現(xiàn)剪貼板功能的輕量級JavaScript庫

摘要：發(fā)布了一個(gè)專門用于從頁面向本地計(jì)算機(jī)的剪貼板復(fù)制文本的庫。用庫來實(shí)現(xiàn)這一功能，問題是這個(gè)庫是用一個(gè)不可見的來完成剪貼操作，而技術(shù)正被各大瀏覽器廠商冷落，所以勢必要有一個(gè)新的方案。 showImg(https://segmentfault.com/img/bVso8J); Zeno Rocha發(fā)布了一個(gè)專門用于從web頁面向本地計(jì)算機(jī)的剪貼板復(fù)制文本的JavaScript庫：Clipb...

phodal 2019-08-19 17:27 評論0 收藏0
JS實(shí)現(xiàn)將圖片復(fù)制到剪貼板

摘要：前言最近項(xiàng)目新增需求用戶能夠拖拽頁面上的圖片文件到文檔。在現(xiàn)有的拖拽事件所提供無法滿足需求的情況下，換一個(gè)思路走嘗試將圖片復(fù)制到剪貼板。只復(fù)制目標(biāo)節(jié)點(diǎn)的子節(jié)點(diǎn)，對于標(biāo)簽，如果不額外包裹一層父元素，無法實(shí)現(xiàn)圖片復(fù)制。前言最近項(xiàng)目新增需求：用戶能夠拖拽頁面上的圖片文件到word文檔。當(dāng)操作瀏覽器里拖拽圖片至別的程序，在word文檔中展示出獲取到的只是圖片的url地址，而非預(yù)期的圖片文件...

MageekChiu 2019-08-22 18:02 評論0 收藏0
JavaScript復(fù)制內(nèi)容到剪貼板

摘要：原文鏈接最近一個(gè)活動頁面中有一個(gè)小需求，用戶點(diǎn)擊或者長按就可以復(fù)制內(nèi)容到剪貼板，記錄一下實(shí)現(xiàn)過程和遇到的坑。完整代碼如下復(fù)制成功總結(jié)以上就是關(guān)于如何實(shí)現(xiàn)復(fù)制內(nèi)容到剪貼板，附上幾個(gè)鏈接兼容性原文鏈接：https://github.com/axuebin/ar... 最近一個(gè)活動頁面中有一個(gè)小需求，用戶點(diǎn)擊或者長按就可以復(fù)制內(nèi)容到剪貼板，記錄一下實(shí)現(xiàn)過程和遇到的坑。常見方法查了一下...

ideaa 2019-08-22 14:54 評論0 收藏0
前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等

摘要：取消默認(rèn)的復(fù)制事件被復(fù)制的文字等下插入防知乎掘金復(fù)制一兩個(gè)字則不添加版權(quán)信息超過一定長度的文字就添加版權(quán)信息作者鏈接來源掘金著作權(quán)歸作者所有。以上參考資料高程操作剪貼板網(wǎng)頁上如何實(shí)現(xiàn)禁止復(fù)制粘貼以及如何破解原生實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

mikasa 2019-08-29 16:20 評論0 收藏0
前端er怎樣操作剪切復(fù)制以及禁止復(fù)制+破解等

摘要：取消默認(rèn)的復(fù)制事件被復(fù)制的文字等下插入防知乎掘金復(fù)制一兩個(gè)字則不添加版權(quán)信息超過一定長度的文字就添加版權(quán)信息作者鏈接來源掘金著作權(quán)歸作者所有。以上參考資料高程操作剪貼板網(wǎng)頁上如何實(shí)現(xiàn)禁止復(fù)制粘貼以及如何破解原生實(shí)現(xiàn)點(diǎn)擊按鈕復(fù)制文本 showImg(https://segmentfault.com/img/remote/1460000015942602?w=1280&h=720); 前言...

amuqiao 2019-08-23 10:51 評論0 收藏0