jquery przechwytując pasta wydarzenie

Question

Mam zbindowanych zdarzenie pasty z wejścia:

$(document).ready(function(){ 
     $('.myInput').bind("paste",function(e) { 
      console.log(e); 
     }); 
});​ 

Everytime I Ctrl-V zwraca obiekt e zdarzeń.

Chcę uzyskać dane, które użytkownik zamierza wkleić do danych wejściowych.

sprawdzając obiekt zdarzenia znalazłem wartości w kilku miejscach, takich jak:

• e.srcElement.value
• e.target.value

Ale te z nich zwraca wartość na wejściu po pastę stało. Więc jeśli wkleję tekst po wprowadzeniu innego ciągu, oba ciągi połączą się.

Przeszukałem internet i znalazłem tylko brzydkie rozwiązania flashowe.

Czy jest to czysty sposób to zrobić w jquery?

Myślałem o uzyskaniu całego tekstu z e.srcElement.value po uzyskaniu wartości wejściowej before z pasty, a następnie porównać oba ciągi i wyeliminować pierwszą część, zwracając przez przypadek wartość schowka.

Answer 1

Może to jest to, co staramy się robić, a nie 100% pewne:

HTML:

<input type="text" id="test" class="myInput" value="This is some default text" />​ 

jQuery:

$(document).ready(function() { 
    $('input').on('paste', function (e) { //Attach paste event handler for all inputs 
     $(this).val('').val(e.target.value); //Clear the current value, then insert the value of the data that was pasted 
    }); 
}); 

Fiddle: http://jsfiddle.net/PMq6U/

Answer 2

Możesz użyć zdarzenia onbeforepaste, aby to zrobić.

$(function(){ 
    $('#el').on('beforepaste',function(e){ 
     [...] 
    }); 
}); 

Answer 3

clipboardData działa dla nowoczesnych przeglądarek (IE11 +, Firefox, Chrome ...).

$(document).ready(function(){ 
     $('.myInput').on('paste', function (e) { 
      var dt = e.originalEvent.clipboardData; 
      if(dt && dt.items && dt.items[0]){ 
       dt.items[0].getAsString(function(text){ 
        console.log(text); //the pasted content 
       }); 
      }else if(dt && 'getData' in dt){ 
       console.log(dt.getData('text')); //the pasted content 
      } 
     }); 
}); 

http://jsfiddle.net/6n10y0ds/9/

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer