jquery - plugin - window clipboardevent




Captura de entrada de pasta (12)

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

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.


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