Einfügeereignis in Javascript abfangen

Gibt es eine Möglichkeit, das Einfügeereignis in JavaScript abzufangen und den Rohwert abzurufen, ihn zu ändern und den Wert des zugehörigen DOM-Elements auf den geänderten Wert festzulegen?

Zum Beispiel habe ich einen Benutzer, der versucht, eine Zeichenfolge mit Leerzeichen zu kopieren und einzufügen, und die Länge der Zeichenfolge überschreitet die maximale Länge meines Textfelds. Ich möchte den Text abfangen, die Leerzeichen entfernen und dann den Wert des Textfelds mit dem Änderungswert festlegen.

Ist das möglich?

Sie können das Paste-Ereignis abfangen, indem Sie einen “onpaste”-Handler anhängen und den eingefügten Text abrufen, indem Sie “window.clipboardData.getData('Text')” im IE oder “event.clipboardData.getData('text/plain')” in anderen Browsern.

Beispielsweise:

var myElement = document.getElementById('pasteElement');
myElement.onpaste = function(e) {
  var pastedText = undefined;
  if (window.clipboardData && window.clipboardData.getData) { // IE
    pastedText = window.clipboardData.getData('Text');
  } else if (e.clipboardData && e.clipboardData.getData) {
    pastedText = e.clipboardData.getData('text/plain');
  }
  alert(pastedText); // Process and handle text...
  return false; // Prevent the default handler from running.
};

Wie @pimvdb feststellt, müssen Sie “e.originalEvent.clipboardData” bei Verwendung von jQuery.

Zufällig habe ich heute früher eine ähnliche Frage beantwortet. Kurz gesagt, Sie brauchen einen Hack, um das Caret-Zeichen in einen Textbereich außerhalb des Bildschirms umzuleiten, wenn das Einfügeereignis ausgelöst wird.

$(document).ready(function() {
    $("#editor").bind('paste', function (e){
        $(e.target).keyup(getInput);
    });

    function getInput(e){
        var inputText = $(e.target).val();
        alert(inputText);
        $(e.target).unbind('keyup');
    }
});

Ich musste ein “Trimmen” für alles einfügen, was eingefügt wurde (alle führenden und nachgestellten Leerzeichen entfernen), während die Verwendung der Leertaste weiterhin zulässig war.

Für Strg+V, Umschalt+Einfügen und Einfügen mit der rechten Maustaste funktioniert Folgendes in FF, IE11 und Chrome seit dem 22.04.2017:

$(document).ready(function() {
    var lastKeyCode = 0;

    $('input[type="text"]').bind('keydown', function(e) {
        lastKeyCode = e.keyCode;
    });
    // Bind on the input having changed.  As long as the previous character
    // was not a space, BS or Del, trim the input.
    $('input[type="text"]').bind('input', function(e) {
        if(lastKeyCode != 32 && lastKeyCode != 8 && lastKeyCode != 46) {
            $(this).val($(this).val().replace(/^s+|s+$/g, ''));
        }
    });
});

Zwei Vorbehalte:

1. Wenn beim Einfügen bereits Text vorhanden ist, wird das gesamte Ergebnis getrimmt, nicht nur das, was eingefügt wird.

2. Wenn der Benutzer Leerzeichen oder BS oder Entf eingibt und dann einfügt, erfolgt kein Trimmen.