Catch-Paste-Eingabe

Ich suche nach einer Möglichkeit, Eingaben zu bereinigen, die ich in den Browser einfüge. Ist dies mit jQuery möglich?

Ich habe es bisher geschafft, Folgendes zu finden:

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

Leider ist meine Entwicklung aufgrund dieses "kleinen" Problems zum Stillstand gekommen. Ich würde mich wirklich zu einem glücklichen Camper machen, wenn mich jemand in die richtige Richtung weisen könnte.

OK, bin gerade auf das gleiche Problem gestoßen. Ich bin den langen Weg gegangen

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

Nur eine kleine Zeitüberschreitung, bis .val () func gefüllt werden kann.

E. E.

Sie können den Wert direkt aus dem Ereignis abrufen . Es ist ein bisschen stumpf, wie man dorthin kommt.

Geben Sie false zurück, wenn Sie nicht möchten, dass es durchlaufen wird.

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

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

});

Aus Gründen der plattformübergreifenden Kompatibilität sollten Ereignisse oninput und onpropertychange behandelt werden:

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

Ich habe es irgendwie mit dem folgenden Code behoben:

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

Jetzt muss ich nur noch den Caret-Standort speichern und an diese Position anhängen, dann bin ich fertig ... denke ich :)

Hmm ... Ich denke, Sie können e.clipboardDatadamit die eingefügten Daten abfangen. Wenn es nicht klappt, schauen Sie hier .

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

Warten Sie auf das Einfügeereignis und legen Sie einen Listener für Keyup-Ereignisse fest. Erfassen Sie beim Keyup den Wert und entfernen Sie den Listener für das Keyup-Ereignis.

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

Es wird gut funktionieren.

Dies kommt dem näher, was Sie vielleicht wollen.

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

Beachten Sie, dass Sie derzeit den vollständigen Wert des Elements + den Wert der Zwischenablage erhalten, wenn das Objekt clipboardData nicht gefunden wird (in anderen Browsern als dem Internet Explorer).

Sie können wahrscheinlich einige zusätzliche Schritte ausführen, um die beiden Werte vor einer Eingabe und nach der Eingabe zu unterscheiden, wenn Sie wirklich erst danach sind, welche Daten wirklich in das Element eingefügt wurden.

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

Dies funktioniert für Mauseinfügeereignisse.

Wie wäre es, wenn Sie den ursprünglichen Wert des Felds mit dem geänderten Wert des Felds vergleichen und die Differenz als eingefügten Wert abziehen? Dadurch wird der eingefügte Text auch dann korrekt erfasst, wenn im Feld bereits Text vorhanden ist.

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

Dieser Code funktioniert für mich entweder durch Einfügen mit der rechten Maustaste oder durch direktes Kopieren und Einfügen

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

Wenn ich einfüge Section 1: Labour Cost, wird es 1in Textfeld.

Um nur Float-Werte zuzulassen, verwende ich diesen Code

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

        ...
    }
});

Des Weiteren:

• Zwischenablage-API und Ereignisse

Siehe dieses Beispiel: http://www.p2e.dk/diverse/detectPaste.htm

Es verfolgt im Wesentlichen jede Änderung mit einem Eingabeereignis und prüft dann, ob es sich um eine Einfügung handelt, indem es einen String vergleicht. Oh, und im IE gibt es ein Onpaste-Ereignis. So:

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

Diese Methode verwendet jqueries content (). Unwrap ().

1. Ermitteln Sie zunächst das Einfügeereignis
2. Fügen Sie den Tags, die sich bereits in dem Element befinden, in das wir einfügen, eine eindeutige Klasse hinzu.

3. Durchsuchen Sie nach einer bestimmten Zeitüberschreitung alle Inhalte, die Tags entpacken, die nicht die zuvor festgelegte Klasse haben. Hinweis: Diese Methode entfernt keine selbstschließenden Tags wie in
   einem Beispiel unten.

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

Dies erwies sich als ziemlich illusorisch. Der Wert der Eingabe wird vor der Ausführung des Codes innerhalb der Einfügeereignisfunktion nicht aktualisiert. Ich habe versucht, andere Ereignisse aus der Funktion zum Einfügen von Ereignissen heraus aufzurufen, aber der Eingabewert wird immer noch nicht mit dem eingefügten Text innerhalb der Funktion von Ereignissen aktualisiert. Das sind alle Ereignisse außer Keyup. Wenn Sie keyup aus der Funktion zum Einfügen von Ereignissen aufrufen, können Sie den eingefügten Text aus der Funktion keyup event bereinigen. wie so ...

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

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

Hier gibt es eine Einschränkung. Wenn Sie in Firefox den Eingabetext bei jedem Keyup zurücksetzen, wenn der Text länger als der durch die Eingabebreite zulässige sichtbare Bereich ist, wird durch das Zurücksetzen des Werts bei jedem Keyup die Browserfunktionalität unterbrochen, mit der der Text automatisch zur Caret-Position am gescrollt wird Ende des Textes. Stattdessen scrollt der Text zurück zum Anfang und lässt das Caret außer Sicht.

Skript zum Entfernen von Sonderzeichen aus allen Feldern mit dem Klassenportlet-Formular-Eingabefeld:

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

Hier gibt es eine Einschränkung. Wenn Sie in Firefox den Eingabetext bei jedem Keyup zurücksetzen, wenn der Text länger als der durch die Eingabebreite zulässige sichtbare Bereich ist, wird durch das Zurücksetzen des Werts bei jedem Keyup die Browserfunktionalität unterbrochen, mit der der Text automatisch zur Caret-Position am gescrollt wird Ende des Textes. Stattdessen scrollt der Text zurück zum Anfang und lässt das Caret außer Sicht.

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