Ingresso incolla cattura

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

Sono riuscito a trovare questo 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 appena imbattuto nello stesso problema ... Ho fatto il lungo cammino

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

Solo un piccolo timeout fino a quando .val () func può essere popolato.

E.

Puoi effettivamente prendere il valore direttamente dall'evento . È un po 'ottuso come arrivarci però.

Restituisci false se non vuoi che passi.

$(this).on('paste', function(e) {

  var pasteData = e.originalEvent.clipboardData.getData('text')

});

Per la compatibilità multipiattaforma, dovrebbe 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') {
        $('<textarea></textarea>').attr('id', 'paste').appendTo('#editMode');
        $("#paste").focus();
        setTimeout($(this).paste, 250);
    }
});

Ora ho solo bisogno di memorizzare la posizione del punto di inserimento e aggiungerla a quella posizione, quindi sono pronto ... Penso :)

Hmm ... Penso che puoi usare e.clipboardDataper catturare i dati 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. Al keyup, 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');
}

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

Funzionerà benissimo.

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'oggetto ClipboardData non viene trovato (su browser diversi da IE) si sta attualmente ottenendo il valore completo dell'elemento + il valore con gli appunti.

Probabilmente puoi fare qualche passo in più per difendere i due valori, prima di un input e dopo l'input, se in realtà stai solo dopo quali dati sono stati realmente incollati nell'elemento.

 $('').bind('input propertychange', function() {....});                      

Questo funzionerà per l'evento incolla del mouse.

Che ne dici di confrontare il valore originale del campo e il valore modificato del campo e dedurre la differenza come valore incollato? In questo modo il testo incollato viene catturato correttamente anche se nel campo è presente del testo.

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

Questo codice funziona per me o incolla dal clic destro o copia diretta incolla

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

Quando lo incollo Section 1: Labour Costdiventa 1nella 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

Tiene traccia essenzialmente di ogni modifica con l'evento oninput e quindi controlla se si tratta di un incolla per confronto di stringhe. 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 incolla
2. Aggiungi una classe unica ai tag che sono già nell'elemento in cui stiamo incollando.

3. Dopo un determinato timeout, scansiona tutti i tag di scartamento del contenuto che non hanno la classe impostata in precedenza. Nota: questo metodo non rimuove i tag a chiusura automatica come
   Vedi un esempio di seguito.

   //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);

Ciò si è rivelato piuttosto illusorio. Il valore dell'input non viene aggiornato prima dell'esecuzione del codice all'interno della funzione evento incolla. Ho provato a chiamare altri eventi all'interno della funzione evento incolla ma il valore di input non è ancora aggiornato con il testo incollato all'interno della funzione di eventuali eventi. Questo è tutti gli eventi oltre a keyup. Se si chiama keyup dalla funzione evento incolla è possibile 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 reimposta il testo di input su ogni keyup, se il testo è più lungo dell'area visualizzabile consentita dalla larghezza di input, quindi il ripristino del valore su ogni keyup interrompe la funzionalità del browser che fa scorrere automaticamente il testo nella posizione di inserimento fine del testo. Invece il testo scorre di nuovo all'inizio, lasciando il cursore fuori dalla vista.

Script per rimuovere caratteri speciali da tutti i campi con classe portlet-form-input-field:

// 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 reimposta il testo di input su ogni keyup, se il testo è più lungo dell'area visualizzabile consentita dalla larghezza di input, quindi il ripristino del valore su ogni keyup interrompe la funzionalità del browser che fa scorrere automaticamente il testo nella posizione di inserimento fine del testo. Invece il testo scorre di nuovo all'inizio, lasciando il cursore fuori dalla vista.

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