Input di input catch

Sto cercando un modo per disinfettare l’input che ho incollato nel browser, è ansible farlo con jQuery?

Sono riuscito a inventarlo finora:

$(this).live(pasteEventName, function(e) { // this is where i would like to sanitize my input return false; } 

Sfortunatamente il mio sviluppo è arrivato a una stretta stridente a causa di questo problema “minore”. Mi farebbe davvero un campeggiatore felice se qualcuno potesse indicarmi la giusta direzione.

OK, mi sono imbattuto nello stesso problema .. Ho fatto il giro della lunga strada

 $('input').on('paste', function () { var element = this; setTimeout(function () { var text = $(element).val(); // do something with text }, 100); }); 

Solo un piccolo timeout fino alla funzione .val () può essere popolata.

E.

Puoi effettivamente prendere il valore direttamente dall’evento . È un po ‘ottuso come arrivarci.

Restituisci falso se non vuoi che passi.

 $(this).on('paste', function(e) { var pasteData = e.originalEvent.clipboardData.getData('text') }); 

Per la compatibilità multipiattaforma, deve gestire gli eventi oninput e onpropertychange:

 $ (something).bind ("input propertychange", function (e) { // check for paste as in example above and // do something }) 

Ho risolto il problema usando il seguente codice:

 $("#editor").live('input paste',function(e){ if(e.target.id == 'editor') { $('').attr('id', 'paste').appendTo('#editMode'); $("#paste").focus(); setTimeout($(this).paste, 250); } }); 

Ora ho solo bisogno di memorizzare la posizione del cursore e accodare a quella posizione, quindi sono tutto pronto … Penso 🙂

Hmm … Penso che tu possa usare e.clipboardData per catturare i dati che vengono incollati. Se non esce, dai un’occhiata qui .

 $(this).live("paste", function(e) { alert(e.clipboardData); // [object Clipboard] }); 

Ascolta l’evento incolla e imposta un listener di eventi keyup. Alla chiave, acquisire il valore e rimuovere il listener di eventi keyup.

 $('.inputTextArea').bind('paste', function (e){ $(e.target).keyup(getInput); }); function getInput(e){ var inputText = $(e.target).val(); $(e.target).unbind('keyup'); } 

Questo si sta avvicinando a ciò che potresti desiderare.

 function sanitize(s) { return s.replace(/\bfoo\b/g, "~"); }; $(function() { $(":text, textarea").bind("input paste", function(e) { try { clipboardData.setData("text", sanitize(clipboardData.getData("text")) ); } catch (e) { $(this).val( sanitize( $(this).val() ) ); } }); }); 

Si noti che quando l’object ClipboardData non viene trovato (su browser diversi da IE) si ottiene attualmente il valore completo dell’elemento + il valore degli Appunti.

Probabilmente puoi fare qualche passo in più per dif i due valori, prima di un input e dopo l’input, se davvero sei solo dopo che i dati sono stati veramente incollati nell’elemento.

Che ne dici di confrontare il valore originale del campo e il valore modificato del campo e dedurre la differenza come valore incollato? Ciò intercetta correttamente il testo incollato anche se c’è del testo esistente nel campo.

http://jsfiddle.net/6b7sK/

 function text_diff(first, second) { var start = 0; while (start < first.length && first[start] == second[start]) { ++start; } var end = 0; while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) { ++end; } end = second.length - end; return second.substr(start, end - start); } $('textarea').bind('paste', function () { var self = $(this); var orig = self.val(); setTimeout(function () { var pasted = text_diff(orig, $(self).val()); console.log(pasted); }); }); 
  $('').bind('input propertychange', function() {....}); 

Ciò funzionerà per l’evento mouse paste.

 $("#textboxid").on('input propertychange', function () { //perform operation }); 

Funzionerà bene.

Questo codice funziona per me o incollato con il tasto destro del mouse o con copia diretta della copia

  $('.textbox').on('paste input propertychange', function (e) { $(this).val( $(this).val().replace(/[^0-9.]/g, '') ); }) 

Quando incollo Section 1: Labour Cost diventa 1 nella casella di testo.

Per consentire solo il valore float, utilizzo questo codice

  //only decimal $('.textbox').keypress(function(e) { if(e.which == 46 && $(this).val().indexOf('.') != -1) { e.preventDefault(); } if (e.which == 8 || e.which == 46) { return true; } else if ( e.which < 48 || e.which > 57) { e.preventDefault(); } }); 
 document.addEventListener('paste', function(e){ if(e.clipboardData.types.indexOf('text/html') > -1){ processDataFromClipboard(e.clipboardData.getData('text/html')); e.preventDefault(); ... } }); 

Ulteriore:

  • API ed eventi degli appunti

Vedi questo esempio: http://www.p2e.dk/diverse/detectPaste.htm

È essenziale tenere traccia di ogni modifica con l’evento oninput e quindi verificare se si tratta di un confronto di copia per incolla. Oh, e in IE c’è un evento onpaste. Così:

 $ (something).bind ("input paste", function (e) { // check for paste as in example above and // do something }) 

Questo metodo utilizza jqueries contents (). Unwrap ().

  1. Innanzitutto, rileva l’evento paste
  2. Aggiungi una class univoca ai tag che sono già presenti nell’elemento in cui stiamo incollando.
  3. Dopo un determinato timeout scansiona tutti i tag che scartano i contenuti che non hanno la class che hai impostato in precedenza. Nota: questo metodo non rimuove i tag di chiusura automatica come
    Guarda un esempio qui sotto.

     //find all children .find('*') and add the class .within .addClass("within") to all tags $('#answer_text').find('*').each(function () { $(this).addClass("within"); }); setTimeout(function() { $('#answer_text').find('*').each(function () { //if the current child does not have the specified class unwrap its contents $(this).not(".within").contents().unwrap(); }); }, 0); 

Questo si è rivelato abbastanza illusorio. Il valore dell’ingresso non viene aggiornato prima dell’esecuzione del codice all’interno della funzione dell’evento paste. Ho provato a chiamare altri eventi dalla funzione di evento paste ma il valore di input non è ancora aggiornato con il testo incollato all’interno della funzione di qualsiasi evento. Questo è tutti gli eventi oltre alla chiave. Se si chiama keyup dalla funzione di evento paste, è ansible disinfettare il testo incollato dalla funzione evento keyup. così…

 $(':input').live ( 'input paste', function(e) { $(this).keyup(); } ); $(':input').live ( 'keyup', function(e) { // sanitize pasted text here } ); 

C’è un avvertimento qui. In Firefox, se si ripristina il testo di input su ogni keyup, se il testo è più lungo dell’area visualizzabile consentita dalla larghezza dell’input, quindi reimpostando il valore su ogni keyup si interrompe la funzionalità del browser che consente lo scorrimento automatico del testo alla posizione del cursore sul fine del testo. Invece il testo scorre indietro all’inizio lasciando il punto di vista fuori dalla vista.

Script per rimuovere caratteri speciali da tutti i campi con il campo di input del modulo portlet di class:

 // Remove special chars from input field on paste jQuery('.portlet-form-input-field').bind('paste', function(e) { var textInput = jQuery(this); setTimeout(function() { textInput.val(replaceSingleEndOfLineCharactersInString(textInput.val())); }, 200); }); function replaceSingleEndOfLineCharactersInString(value) { < % // deal with end-of-line characters (\n or \r\n) that will affect string length calculation, // also remove all non-printable control characters that can cause XML validation errors %> if (value != "") { value = value.replace(/(\x00|\x01|\x02|\x03|\x04|\x05|\x06|\x07|\x08|\x0B|\x0C|\x0E|\x0F|\x10|\x11|\x12|\x13|\x14|\x15|\x16|\x17|\x18|\x19|\x1A|\x1B|\x1C|\x1D|\x1E|\x1F|\x7F)/gm,''); return value = value.replace(/(\r\n|\n|\r)/gm,'##').replace(/(\#\#)/gm,"\r\n"); } } 

C’è un avvertimento qui. In Firefox, se si ripristina il testo di input su ogni keyup, se il testo è più lungo dell’area visualizzabile consentita dalla larghezza dell’input, quindi reimpostando il valore su ogni keyup si interrompe la funzionalità del browser che consente lo scorrimento automatico del testo alla posizione del cursore sul fine del testo. Invece il testo scorre indietro all’inizio lasciando il punto di vista fuori dalla vista.

 function scroll(elementToBeScrolled) { //this will reset the scroll to the bottom of the viewable area. elementToBeScrolled.topscroll = elementToBeScrolled.scrollheight; }