Intercepter l'événement coller en Javascript

Question

Existe-t-il un moyen d'intercepter l'événement coller dans JavaScript et d'obtenir la valeur brute, de la modifier et de définir la valeur de l'élément DOM associé comme valeur modifiée ?

Par exemple, j'ai un utilisateur qui essaie de copier et coller une chaîne avec des espaces et la longueur de la chaîne dépasse la longueur maximale de ma zone de texte. Je veux intercepter le texte, supprimer les espaces, puis définir la valeur de la zone de texte avec la valeur de modification.

Est-ce possible?

Answer 1

Vous pouvez intercepter l'événement coller en attachant un gestionnaire "onpaste" et obtenir le texte collé en utilisant " window.clipboardData.getData('Text') " dans IE ou " event.clipboardData.getData('text/plain') " dans d'autres navigateurs.

Par exemple:

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

Comme le note @pimvdb, vous devrez utiliser " e.originalEvent.clipboardData " si vous utilisez jQuery.

Answer 2

Il se trouve que j'ai répondu à une question similaire plus tôt aujourd'hui. En bref, vous avez besoin d'un hack pour rediriger le curseur vers une zone de texte hors écran lorsque l'événement coller se déclenche.

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