Jak przechwycić wartość wejściową w przypadku wklejania?

Question

W mojej witrynie użytkownicy mogą wklejać tekst (w tym przypadku adres URL) do pola wejściowego. Chciałbym uchwycić wartość tekstu, który został wklejony za pomocą jQuery. Mam to do pracy w FF za pomocą kodu poniżej, ale nie działa w IE (nie sądzę IE obsługuje "wklej" zdarzenia).

Ktoś wie, jak to zrobić we wszystkich nowoczesnych przeglądarkach? Znalazłem kilka innych odpowiedzi na to na SO, ale większość z nich to tylko FF i żaden nie oferował kompletnego rozwiązania.

Oto kod mam tak daleko:

$("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/

Answer 1

jQuery ma problem z żywą metodą ze zdarzeniem wklejania w IE; Obejście:

$(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); 
    }); 
}); 

Fiddle: http://jsfiddle.net/Trg9F/

Answer 2

Może spróbuj użyć zdarzenia onblur zamiast. Tak więc użytkownik c/p do danych wejściowych i po opuszczeniu pola skrypt sprawdza, co tam jest. To może zaoszczędzić wiele kłopotów, ponieważ działa na mysz i klawisz c/p, a także ręcznie wprowadzane dane wejściowe.

Answer 3

wykrywać zdarzenie change jak paste. change będzie rzucał niezawodnie na zmienione pole przed wysłaniem, natomiast paste dzieje się tylko w przeglądarkach, które obsługują go na jawnym wklejeniu; nie będą one uruchamiane przez inne czynności edycyjne, takie jak przeciąganie i upuszczanie, wycinanie-kopiowanie, cofanie ponownej edycji, sprawdzanie pisowni, zastępowanie IME itd.

Problem z change polega na tym, że nie strzela od razu, tylko po zakończeniu edycji w polu. Jeśli chcesz przechwycić wszystkie zmiany w momencie ich wystąpienia, wydarzenie będzie miało postać input ... z tą różnicą, że jest to nowa funkcja HTML5, która nie jest obsługiwana wszędzie (w szczególności: IE < 9). Można to zrobić przez prawie wszystkie połowu tych zdarzeń:

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

Ale jeśli chcesz zdecydowanie połowu każda zmiana szybko w przeglądarkach, które nie obsługują input, nie masz wyboru, ale do sondowania wartość na setInterval.

Answer 4

Jeszcze lepiej jest używać e.originalEvent.clipboardData.getData ("tekst"); aby pobrać wklejone dane;

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

W ten sposób można uniknąć przekroczenia limitu czasu i jest on obsługiwany we wszystkich głównych przeglądarkach.

Answer 5

$('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'); 
});