Wprowadź wklej złap

Szukam sposobu na oczyszczenie danych wejściowych wklejonych do przeglądarki, czy jest to możliwe w przypadku jQuery?

Jak dotąd udało mi się to wymyślić:

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

Niestety mój rozwój został wstrzymany z powodu tego „drobnego” problemu. Naprawdę uczyniłbym mnie szczęśliwym obozowiczem, gdyby ktoś mógł skierować mnie w dobrym kierunku.

OK, wpadłem na ten sam problem. Przeszedłem długą drogę

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

Wystarczy mały limit czasu, aż funkcja .val () func może zostać zapełniona.

MI.

Możesz pobrać wartość bezpośrednio z wydarzenia . To trochę tępe, jak się do tego dostać.

Zwróć false, jeśli nie chcesz, aby to przeszło.

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

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

});

W celu zapewnienia zgodności między platformami powinien on obsługiwać zdarzenia wejściowe i zmiany typu:

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

Naprawiłem go, używając następującego kodu:

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

Teraz muszę tylko zapisać położenie karetki i dołączyć do tej pozycji, a potem wszystko gotowe ... Myślę, że :)

Hmm ... Myślę , że możesz użyć, e.clipboardDataaby złapać wklejane dane. Jeśli się nie uda, spójrz tutaj .

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

Nasłuchuj zdarzenia wklejania i ustaw detektor zdarzenia keyup. Podczas tworzenia klucza przechwyć wartość i usuń moduł nasłuchiwania zdarzeń klucza.

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

Będzie dobrze działać.

Zbliża się to do tego, czego możesz chcieć.

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

Pamiętaj, że gdy obiekt clipboardData nie zostanie znaleziony (w przeglądarkach innych niż IE), obecnie otrzymujesz pełną wartość elementu + wartość ze schowka.

Prawdopodobnie możesz wykonać dodatkowe kroki, aby różnicować te dwie wartości, przed wejściem i po danych wejściowych, jeśli naprawdę dopiero po tym, jakie dane zostały naprawdę wklejone do elementu.

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

To zadziała dla zdarzenia wklejania myszy.

Co powiesz na porównanie oryginalnej wartości pola ze zmienioną wartością pola i odjęcie różnicy jako wklejonej wartości? Spowoduje to prawidłowe wychwycenie wklejonego tekstu, nawet jeśli w polu istnieje tekst.

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

Ten kod działa dla mnie albo wklej prawym przyciskiem myszy, albo wklej bezpośrednio kopiuj

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

Po wklejeniu Section 1: Labour Coststaje się 1w polu tekstowym.

Aby zezwolić tylko na wartość zmiennoprzecinkową, używam tego kodu

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

        ...
    }
});

Dalej:

• Interfejs API schowka i zdarzenia

Zobacz ten przykład: http://www.p2e.dk/diverse/detectPaste.htm

Zasadniczo śledzi każdą zmianę za pomocą zdarzenia oninput, a następnie sprawdza, czy jest to porównanie przez wklejenie. Aha, a w IE jest zdarzenie wklejania. Więc:

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

Ta metoda wykorzystuje zawartość jqueries content (). Uncrap ().

1. Najpierw wykryj zdarzenie wklejania
2. Dodaj unikalną klasę do tagów, które są już w elemencie, do którego wklejamy.

3. Po określonym limicie czasu przejrzyj wszystkie tagi rozpakowywania zawartości, które nie mają ustawionej wcześniej klasy. Uwaga: ta metoda nie usuwa tagów samozamykających się, jak
   na przykład poniżej.

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

Okazało się to dość iluzoryczne. Wartość danych wejściowych nie jest aktualizowana przed wykonaniem kodu wewnątrz funkcji zdarzenia wklejania. Próbowałem wywoływać inne zdarzenia z funkcji wklejania zdarzenia, ale wartość wejściowa nadal nie jest aktualizowana z wklejonym tekstem wewnątrz funkcji jakichkolwiek zdarzeń. To są wszystkie zdarzenia oprócz keyup. Jeśli wywołujesz keyup z funkcji wklejania zdarzenia, możesz zdezynfekować wklejony tekst z funkcji zdarzenia blokowania. tak jak ...

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

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

Jest tutaj jedno zastrzeżenie. W przeglądarce Firefox, jeśli zresetujesz tekst wejściowy przy każdym zestawieniu klawiszy, jeśli tekst jest dłuższy niż widoczny obszar dozwolony przez szerokość wejściową, to zresetowanie wartości przy każdym zestawieniu klawiszy przerywa działanie przeglądarki, która automatycznie przewija tekst do pozycji daszka na koniec tekstu. Zamiast tego tekst przewija się z powrotem na początek, pozostawiając niewidoczny kursor.

Skrypt do usuwania znaków specjalnych ze wszystkich pól za pomocą klasy 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");
    }
}

Jest tutaj jedno zastrzeżenie. W przeglądarce Firefox, jeśli zresetujesz tekst wejściowy przy każdym zestawieniu klawiszy, jeśli tekst jest dłuższy niż widoczny obszar dozwolony przez szerokość wejściową, to zresetowanie wartości przy każdym zestawieniu klawiszy przerywa działanie przeglądarki, która automatycznie przewija tekst do pozycji daszka na koniec tekstu. Zamiast tego tekst przewija się z powrotem na początek, pozostawiając niewidoczny kursor.

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