關於瀏覽器中copy, cut, paste捕獲的總結


目前這三個事件均可以通過jQuery.on(“copy cut paste”, handlerFn)捕獲,支持:Firefox, IE9, Chrome,網上說的使用setTimeout方式目的是為了獲取粘貼到輸入框后的全部的值;

setTimeout方式的示例代碼如下:

$("input").off("paste").on("paste", function(e){
    setTimeout(function(){
        var val = $(this).val();
        // 獲取粘貼到輸入框后的值,進行驗證處理
    }, 100);
});

handlerFn的觸發是在"鼠標右鍵粘貼點擊"之后,"輸入框顯示粘貼值"之前;如果想禁用此功能,可以使用:e.preventDefault()禁止粘貼的操作;

根據MDN上的介紹,這三類事件統稱為:ClipboardEvent,在handlerFn中可以通過getData方法獲取到數據;只是當前這個API僅有Chrome和Firefox22以上支持,所以被用到的並不廣泛;

示例代碼如下:

$("input").off("paste").on("paste", function(e){
  var eData = e.originalEvent.clipboardData;
  console.log("paste:", arguments, e.originalEvent, eData, eData.types, eData.getData("text/plain"));
});

當前W3C稱該類文檔為:Clipboard API and events,處於工作草案的狀態(Working Draft),不屬於Html5的推薦;

具體請參考:

MDN    https://developer.mozilla.org/en-US/docs/Web/Events/paste

W3C Draft http://www.w3.org/TR/clipboard-apis/#paste-event

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM