jquery - plugin - window clipboardevent




Captura de entrada de pasta (12)

Eu estou procurando uma maneira de higienizar a entrada que eu colo no navegador, isso é possível fazer com jQuery?

Eu consegui chegar a isso até agora:

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

Infelizmente, meu desenvolvimento chegou a um ponto insuportável devido a esse problema "menor". Eu realmente me faria um campista feliz se alguém pudesse me apontar na direção certa.


Há uma ressalva aqui. No Firefox, se você redefinir o texto de entrada em cada chave, se o texto for maior do que a área visível permitida pela largura de entrada, redefinir o valor em cada chave quebra a funcionalidade do navegador que rola automaticamente o texto para a posição do cursor no local. fim do texto. Em vez disso, o texto rola de volta para o início, deixando o cursor fora da vista.

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

Este código está funcionando para mim ou colar do clique direito ou pasta de cópia direta

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

Quando eu colo Section 1: Labour Cost ele se torna 1 na caixa de texto.

Para permitir apenas o valor float eu 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();
      }
    });

Eu meio que consertei usando o seguinte 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);
    }
});

Agora eu só preciso armazenar a localização do cursor e acrescentar a essa posição, então estou pronto ... eu acho :)


Hmm ... Eu acho que você pode usar e.clipboardData para pegar os dados que estão sendo colados. Se não der certo, dê uma olhada here .

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

Isto provou ser bastante ilusório. O valor da entrada não é atualizado antes da execução do código dentro da função de evento paste. Eu tentei chamar outros eventos de dentro da função de evento paste, mas o valor de entrada ainda não é atualizado com o texto colado dentro da função de qualquer evento. Isso é tudo eventos além da chave. Se você chamar keyup a partir da função de evento paste, poderá limpar o texto colado de dentro da função de evento de keyup. igual a...

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

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

Há uma ressalva aqui. No Firefox, se você redefinir o texto de entrada em cada chave, se o texto for maior do que a área visível permitida pela largura de entrada, redefinir o valor em cada chave quebra a funcionalidade do navegador que rola automaticamente o texto para a posição do cursor no local. fim do texto. Em vez disso, o texto rola de volta para o início, deixando o cursor fora da vista.


OK, apenas esbarrou no mesmo problema .. eu fui em torno do caminho mais longo

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

Apenas um pequeno timeout até .val () func pode ser preenchido.

E.


Para compatibilidade entre plataformas, ele deve manipular eventos oninput e onpropertychange:

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

Que tal comparar o valor original do campo e o valor alterado do campo e deduzir a diferença como o valor colado? Isso captura o texto colado corretamente, mesmo se houver texto existente no 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);
    });
});

Veja este exemplo: http://www.p2e.dk/diverse/detectPaste.htm

Essencialmente rastreia todas as mudanças com o evento oninput e, em seguida, verifica se é uma comparação de colar por string. Ah, e no IE há um evento onpaste. Assim:

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

Você pode realmente pegar o valor direto do event . É um pouco obtuso como chegar a ele embora.

Retorne false se você não quiser que ele passe.

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

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

});

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

Vai funcionar bem.


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

        ...
    }
});

Mais distante:







sanitize