欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js?剪切、復制、粘貼功能實現

 更新時間:2023年05月02日 16:48:23   作者:huangpb0624  
Navigator.clipboard?API可以用來訪問系統(tǒng)剪貼板,可以實現【剪切、復制、粘貼】功能。該?API?被設計用來取代使用?document.execCommand()?的剪貼板訪問方式,不兼容?IE

針對現代瀏覽器實現(Navigator.clipboard)

Navigator.clipboard API可以用來訪問系統(tǒng)剪貼板,可以實現【剪切、復制、粘貼】功能。該 API 被設計用來取代使用 document.execCommand() 的剪貼板訪問方式,不兼容 IE。

使用 Navigator.clipboard API時會彈出用戶授權彈窗。如果用戶沒有授予權限,則不允許讀取或更改剪貼板內容。

let clipBoard = navigator.clipboard;
// 寫入文本至操作系統(tǒng)剪貼板
clipBoard.writeText('你好').then(() => {
  this.$message.success('復制成功!')
})
// 寫入任意數據(比如圖片)至操作系統(tǒng)剪貼板用 clipBoard.write()
// 從剪貼板讀取文本
clipBoard.readText().then(clipText => {
  console.log(clipText);
})
// 從剪貼板讀取數據(比如圖片)用 clipBoard.read()

針對舊版本瀏覽器實現(document.execCommand)
document.execCommand 針對可編輯內容區(qū)域提供了很多有用的 API,包括其中的【剪切、復制、粘貼】功能。

MDN 寫到 document.execCommand 方法已廢棄。

document.execCommand 的復制有個前提,必須先選中內容,但有時候我們要實現的效果是沒有選中這個動作的,比如在手機號后面有個“復制”按鈕,點擊按鈕就直接復制了手機號,這里我們有2種方法實現:

方法1:在 body 動態(tài)追加一個隱藏的文本域,再用 select() 方法選中里面的內容,接著 document.execCommand('copy') 進行復制。

function copyText (text) {
  $('body').append(`<textarea id="iclip-container" value="${text}">${text}</textarea>`);
  $('#iclip-container').select();
  if (document.execCommand('copy', false, null)) {
    $('#iclip-container').remove();
    alert('復制成功!')
  }
}

方法2:監(jiān)聽 copy 事件,在事件回調里添加要復制的內容。

function copyText (text) {
  const copy = function(event) {
      let clipboardData = event.clipboardData || window.clipboardData;
      clipboardData.setData('text/plain', text);
      event.preventDefault();
  };
  document.addEventListener('copy', copy);
  document.execCommand('copy');
  document.removeEventListener('copy', copy);
  this.$message.success('復制成功!');
},

剪切、復制、粘貼事件

可以給元素綁定 cut、copy、paste 事件監(jiān)聽剪切、復制、粘貼行為。

// 可以監(jiān)聽 cut 事件對剪切內容進行修改
const source = document.querySelector('div.source');
source.addEventListener('cut', (event) => {
    const selection = document.getSelection();
    event.clipboardData.setData('text/plain', selection.toString().toUpperCase());
    selection.deleteFromDocument();
    event.preventDefault();
});

到此這篇關于js 剪切、復制、粘貼功能實現的文章就介紹到這了,更多相關js 剪切、復制、粘貼內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • js實現限定范圍拖拽的示例

    js實現限定范圍拖拽的示例

    這篇文章主要介紹了js實現限定范圍拖拽的示例,幫助大家更好的制作js特效,美化自己的網頁,感興趣的朋友可以了解下
    2020-10-10
  • 直接拿來用的頁面跳轉進度條JS實現

    直接拿來用的頁面跳轉進度條JS實現

    這篇文章主要為大家分享了一款直接拿來用的頁面跳轉進度條,由javascript實現,可以直接跳轉到相應頁面,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-01-01
  • js圖片延遲加載(Lazyload)三種實現方式

    js圖片延遲加載(Lazyload)三種實現方式

    這篇文章主要介紹了js延遲加載(Lazyload)三種實現方式,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-03-03
  • js用于樹型結構級聯選擇

    js用于樹型結構級聯選擇

    js用于樹型結構級聯選擇...
    2007-01-01
  • javascript實現簡單的二級聯動

    javascript實現簡單的二級聯動

    這篇文章主要介紹了javascript實現簡單的二級聯動,非常的實用,需要的朋友可以參考下
    2015-03-03
  • JavaScript 學習筆記(五)

    JavaScript 學習筆記(五)

    今天繼續(xù)學習JS中的對象,昨天內置對象Global對象和Math對象,今天繼續(xù)。
    2009-12-12
  • JavaScript本地存儲實現用戶名存儲案例

    JavaScript本地存儲實現用戶名存儲案例

    本文主要介紹了JavaScript本地存儲實現用戶名存儲案例,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-07-07
  • alert和confirm功能介紹

    alert和confirm功能介紹

    這篇文章主要為大家介紹了alert和confirm的功能,需要的朋友可以參考下
    2014-05-05
  • 在js中實現郵箱格式的驗證方法(推薦)

    在js中實現郵箱格式的驗證方法(推薦)

    下面小編就為大家?guī)硪黄趈s中實現郵箱格式的驗證方法(推薦)。小編覺得挺不錯的,現在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-10-10
  • JavaScript中動態(tài)向表格添加數據

    JavaScript中動態(tài)向表格添加數據

    本文給大家分享使用原生javascript實現動態(tài)向表格中添加數據的方法,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧
    2017-01-01

最新評論