Einfügen-Ereignis in Javascript abfangen

Question

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

Ich habe zum Beispiel 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 Textfeldes. Ich möchte den Text abfangen, die Leerzeichen entfernen und dann den Wert des Textfelds mit dem Änderungswert festlegen.

Ist dies möglich?

Answer 1

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

Zum Beispiel:

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 bemerkt, müssen Sie " e.originalEvent.clipboardData ", wenn Sie jQuery verwenden.

Answer 2

Zufälligerweise habe ich auf eine ähnliche Frage Heute Morgen. Kurz gesagt, Sie brauchen einen Hack, um die Einfügemarke zu einem Textbereich außerhalb des Bildschirms umzuleiten, wenn das Einfügeereignis ausgelöst wird.

Answer 3

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

Answer 4

Ich musste das eingefügte Material "trimmen" (alle führenden und nachfolgenden Leerzeichen entfernen) und gleichzeitig die Verwendung der Leertaste ermöglichen.

Für Strg+V, Umschalt+Einfügen und Einfügen mit der rechten Maustaste, hier ist, was ich gefunden habe, funktionierte in FF, IE11 und Chrome ab 2017-04-22:

$(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 zum Zeitpunkt des Einfügens bereits Text vorhanden ist, wird das gesamte Ergebnis beschnitten, nicht nur der eingefügte Text.

2. Wenn der Benutzer ein Leerzeichen oder BS oder Entf eintippt und dann einfügt, erfolgt kein Beschnitt.