Captura de entrada de pegado

Estoy buscando una manera de desinfectar la entrada que pego en el navegador, ¿es esto posible con jQuery?

Me las he arreglado para llegar a esto hasta ahora:

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

Lamentablemente, mi desarrollo se ha detenido debido a este problema "menor". Realmente me haría una caravana feliz si alguien pudiera señalarme en la dirección correcta.

OK, me encontré con el mismo problema ... Di la vuelta

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

Solo un pequeño tiempo de espera hasta que se pueda completar la función .val ().

MI.

De hecho, puede tomar el valor directamente del evento . Sin embargo, es un poco obtuso cómo llegar.

Devuelve falso si no quieres que pase.

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

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

});

Para la compatibilidad multiplataforma, debe manejar eventos de entrada y cambio de propiedad:

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

Lo solucioné utilizando el siguiente código:

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

Ahora solo necesito almacenar la ubicación del cursor y agregarme a esa posición, entonces estoy listo ... creo :)

Hmm ... creo que puedes usar e.clipboardDatapara atrapar los datos que se están pegando. Si no funciona, eche un vistazo aquí .

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

Escuche el evento de pegar y configure un escucha de evento de keyup. En keyup, captura el valor y elimina el detector de eventos 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
        });

Funcionará bien

Esto se está acercando a lo que podrías desear.

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

Tenga en cuenta que cuando no se encuentra el objeto clipboardData (en navegadores que no sean IE) actualmente está obteniendo el valor completo del elemento + el valor del portapapeles.

Probablemente pueda hacer algunos pasos adicionales para diferenciar los dos valores, antes de una entrada y después de la entrada, si realmente solo busca los datos que realmente se pegaron en el elemento.

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

Esto funcionará para el evento de pegado del mouse.

¿Qué tal comparar el valor original del campo y el valor cambiado del campo y deducir la diferencia como el valor pegado? Esto captura el texto pegado correctamente incluso si hay texto existente en el 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);
    });
});

Este código me funciona, ya sea pegar con el botón derecho o copiar directamente

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

Cuando pego Section 1: Labour Costse convierte 1en cuadro de texto.

Para permitir solo el valor flotante, uso este código

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

        ...
    }
});

Más lejos:

• Portapapeles API y eventos

Vea este ejemplo: http://www.p2e.dk/diverse/detectPaste.htm

Esencialmente rastrea cada cambio con el evento oninput y luego verifica si es una comparación pegar por cadena. Ah, y en IE hay un evento onpaste. Entonces:

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

Este método utiliza jqueries contenidos (). Unwrap ().

1. Primero, detecta el evento pegar
2. Agregue una clase única a las etiquetas que ya están en el elemento en el que estamos pegando.

3. Después de un tiempo de espera determinado, escanee todos los contenidos que desempaquetan las etiquetas que no tienen la clase que configuró anteriormente. Nota: Este método no elimina las etiquetas de cierre automático como
   Ver un ejemplo a continuación.

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

Esto resultó ser bastante ilusorio. El valor de la entrada no se actualiza antes de la ejecución del código dentro de la función de evento pegar. Intenté llamar a otros eventos desde la función de pegar eventos, pero el valor de entrada todavía no se actualiza con el texto pegado dentro de la función de cualquier evento. Eso es todos los eventos aparte de keyup. Si llama a keyup desde la función de evento de pegado, puede desinfectar el texto pegado desde dentro de la función de evento de keyup. al igual que...

$(':input').live
(
    'input paste',
    function(e)
    {
        $(this).keyup();
    }
);

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

Hay una advertencia aquí. En Firefox, si restablece el texto de entrada en cada tecla, si el texto es más largo que el área visible permitida por el ancho de entrada, al restablecer el valor en cada tecla se rompe la funcionalidad del navegador que desplaza automáticamente el texto a la posición de intercalación en el Fin del texto. En cambio, el texto se desplaza hacia atrás hasta el principio, dejando el cursor fuera de la vista.

Script para eliminar caracteres especiales de todos los campos con la clase 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");
    }
}

Hay una advertencia aquí. En Firefox, si restablece el texto de entrada en cada tecla, si el texto es más largo que el área visible permitida por el ancho de entrada, al restablecer el valor en cada tecla se rompe la funcionalidad del navegador que desplaza automáticamente el texto a la posición de intercalación en el Fin del texto. En cambio, el texto se desplaza hacia atrás hasta el principio, dejando el cursor fuera de la vista.

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