如何捕獲粘貼事件的輸入值？

在我的網站上，用戶可以將文本（本例中爲url）粘貼到輸入字段中。我想捕獲使用jQuery粘貼的文本的值。我使用下面的代碼在FF中工作，但它在IE中不起作用（我不認爲IE支持「粘貼」事件）。如何捕獲粘貼事件的輸入值？

任何人都知道如何使這項工作跨越所有現代瀏覽器？我在SO上發現了其他一些答案，但大多數都是FF，而且似乎沒有提供完整的解決方案。

這裏是我到目前爲止的代碼：

$("input.url").live('paste', function(event) { 
    var _this = this; 
    // Short pause to wait for paste to complete 
    setTimeout(function() { 
     var text = $(_this).val(); 
     $(".display").html(text); 
    }, 100); 
});

的jsfiddle：http://jsfiddle.net/TZWsB/1/

來源

2011-08-01 rolling stone

http://stackoverflow.com/questions/2176861/javascript-get-clipboard-data-on-paste-event-cross-browser/2177059#2177059 - 類似 – Avien

感謝@Avien，哇，這是一些複雜的黑客:)不幸的是，通過解決方案閱讀他們沒有一個100％正確工作，或跨所有現代瀏覽器工作。 –

這也可能有幫助，使用jquery並且簡單得多：http://stackoverflow.com/questions/2903991/how-to-detect-ctrlv-ctrlc-using-javascript – sitnik

jQuery在IE中使用粘貼事件的實時方法存在問題;解決方法：

$(document).ready(function() { 
    $(".url").bind('paste', function(event) { 
     var _this = this; 
     // Short pause to wait for paste to complete 
     setTimeout(function() { 
      var text = $(_this).val(); 
      $(".display").html(text); 
     }, 100); 
    }); 
});

小提琴：http://jsfiddle.net/Trg9F/

來源

2011-08-01 18:20:11 scessor

+1謝謝@scessor，這是非常有用的知道。問題是我讓用戶動態添加更多輸入，所以我需要實時方法。有沒有一種方法可以讓這項工作與現場一起工作，而不是一起竊取隱藏輸入的解決方案？ –

我有一個沒有活動的解決方案：當您動態添加輸入時，您可以使用類url解除所有節點的綁定，並再次綁定該粘貼事件;不是很好，但很簡單。 – scessor

工作！謝謝！ –

也許嘗試使用onblur事件來代替。因此，用戶將c/p輸入到輸入中，當他們離開字段時，腳本會檢查那裏有什麼。這可以節省很多麻煩，因爲它適用於鼠標和鍵c/p以及手動輸入輸入。

來源

2011-08-01 18:09:02 qw3n

thanks @ qw3n。問題是頁面上只有url字段，所以我確定當用戶只需粘貼url並點擊提交（不離開字段）時會出現實例。 –

@rolling stone好吧，你可以做一個雙管齊下的檢查。獲取'onsubmit'事件並檢查輸入。如果空返回true否則返回false。問題是你將不得不做一些事情，以防止該功能運行兩次。由於'onblur'事件仍然會觸發。當你從一個函數觸發事件時，可能有布爾切換變量。希望這是有道理的。這是一個複雜的問題，但我認爲不如那麼選擇。 – qw3n

監聽change事件以及paste。 change將在提交之前可靠地在更改的字段上觸發，而paste僅在支持顯式粘貼的瀏覽器上纔會發生;它不會被其他編輯操作觸發，如拖放，剪切複製，撤消重做，拼寫檢查，輸入法替換等。

change的問題在於它不會馬上觸發，僅當在字段中編輯完成時。如果要在發生變化時捕獲所有更改，則事件將爲input ...，但這是一項新的HTML5功能，並不受到任何支持（特別是：IE < 9）。你幾乎可以通過捕獲所有這些事件做到這一點：

$('.url').bind('input change paste keyup mouseup',function(e){ 
    ... 
});

但是，如果你想絕對抓在瀏覽器上的每一個變化很快，不支持input，你別無選擇，只能查詢一個值setInterval。

來源

2011-08-01 18:32:26 bobince

+1 thanks @bobince！我應該提到所有用戶都會在這個輸入字段中進行粘貼（正如我應該說的那樣）。另外它看起來像我錯了，IE支持'粘貼'，它只是有一些'活'和'粘貼'的問題。我的問題是，我動態生成一些內容的基礎上，他們粘貼的網址，我想顯示給用戶，以確保他們提交之前是正確的。事實上，我實際上禁用了URL粘貼時的提交按鈕，直到完成所有這些工作的jQuery函數。任何意見將不勝感激！ –

是的，'onpaste'在IE的某些情況下不會冒泡，jQuery的'live'使用事件委託，這需要冒泡。還有其他特定於瀏覽器的問題，例如Safari中的textareas上的onpaste未觸發。無論兼容性問題如何，我都建議允許以用戶選擇的任何方式填寫字段，包括直接打字和拖放，而不是專門針對粘貼操作。 – bobince

謝謝@bobince，肯定會把這個變成最後的事件來捕獲拖放嗎？ –

更好的是使用e.originalEvent.clipboardData.getData（'text'）;檢索粘貼的數據;

$("input").on("paste", function(e) { 
    var pastedData = e.originalEvent.clipboardData.getData('text'); 
    // ... now do with pastedData whatever you like ... 
});

這樣可以避免超時，並且它在所有主流瀏覽器上都受支持。

來源

2015-05-26 12:50:01

我喜歡這個想法，但對我來說，e.originalEvent有很多屬性，但它沒有剪貼板數據字段/屬性:([我用的是Microsoft TypeSafe＆JQuery 3.1.1和jQuery UI 1.12.1來編寫我的Javascript。] – Zeek

$('input').on('paste', function(e) { 
    // common browser -> e.originalEvent.clipboardData 
    // uncommon browser -> window.clipboardData 
    var clipboardData = e.clipboardData || e.originalEvent.clipboardData || window.clipboardData; 
    var pastedData = clipboardData.getData('text'); 
});

來源

2015-05-28 03:02:11

在我搜索的所有解決方案中，現在只有這個似乎適用於我。 – palerdot

這應該是正確的答案。 –

如何捕獲粘貼事件的輸入值？

回答

相關問題