jquery - from - Capturar entrada de pegar

document execcommand('' paste '')

Question

Estoy buscando una manera de desinfectar las entradas 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 ha llegado a un punto crítico debido a este problema "menor". Realmente me haría una campista feliz si alguien pudiera orientarme en la dirección correcta.

Answer 1

Hay una advertencia aquí. En Firefox, si reinicia el texto de entrada en cada keyup, si el texto es más largo que el área visible permitida por el ancho de entrada, entonces restablecer el valor en cada keyup 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;
}

Answer 2

¿Qué hay de comparar el valor original del campo y el valor modificado del campo y deducir la diferencia como el valor pegado? Esto capta 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);
    });
});

Answer 3

En realidad puedes tomar el valor directamente del event . Aunque es un poco obtuso cómo llegar a eso.

Devuelve falso si no quieres que pase.

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

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

});

Answer 4

Escuche el evento de pegar y configure un oyente de evento de keyup. En la función de teclado, capture el valor y elimine el detector de eventos de teclado.

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

Answer 5

Este código funciona para mí, ya sea pegar desde el botón derecho o copiar directamente pegar

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

Cuando pego la Section 1: Labour Cost se convierte en 1 en el 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();
      }
    });

Answer 6

Este método usa los contenidos de jqueries (). Unwrap ().

1. Primero, detectar el evento de 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 y desenvuelva las etiquetas que no tienen la clase que configuró anteriormente. Nota: Este método no elimina las etiquetas de cierre automático como
   Vea 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);

Answer 7

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 evento pegar, pero el valor de entrada aún no se actualiza con el texto pegado dentro de la función de ningún evento. Eso es todos los eventos aparte de keyup. Si llama a keyup desde dentro de la función de evento de pegado, puede desinfectar el texto pegado desde la función de evento de teclado. 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 reinicia el texto de entrada en cada keyup, si el texto es más largo que el área visible permitida por el ancho de entrada, entonces restablecer el valor en cada keyup 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.

Answer 8

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

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 buscadores distintos de IE), actualmente obtiene el valor completo del elemento + el valor del portapapeles.

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

Answer 9

Hmm ... Creo que puedes usar e.clipboardData para capturar los datos que se están pegando. Si no funciona, échale un vistazo here .

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

Answer 10

Lo solucioné usando 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 anexar a esa posición, entonces estoy listo ... creo :)

Answer 11

OK, solo me topé con el mismo problema ... andé por el camino largo

$(''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 .val () func puede ser poblado.

MI.

Answer 12

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

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

Answer 13

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

Answer 14

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

Básicamente realiza un seguimiento de cada cambio con un evento oninput y luego comprueba si se trata de una comparación de pegar por cadena. Ah, y en IE hay un evento onpass. Asi que:

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

Answer 15

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

Esto funcionará para el evento de pegar del mouse.

Answer 16

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

Funcionará bien.

Answer 17

document.addEventListener(''paste'', function(e){
    if(e.clipboardData.types.indexOf(''text/html'') > -1){
        processDataFromClipboard(e.clipboardData.getData(''text/html''));
        e.preventDefault();

        ...
    }
});

Promover:

• API y eventos del portapapeles