web-dev-qa-db-fra.com

Interception coller en Javascript

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

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

Est-ce possible?

javascriptdomcopy-pastepaste
49
Brandon

Vous pouvez intercepter l'événement Coller en associant 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 @pimvdb le note, vous devrez utiliser "e.originalEvent.clipboardData" si vous utilisez jQuery.

75
maerics

En l'occurrence, 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.

3
Tim Down
$(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');
    }
});
1
Cyrus

J'avais besoin d'implémenter un "découpage" sur tout ce qui était collé (supprimer tous les espaces blancs de début et de fin) tout en permettant l'utilisation de la barre d'espace.

Pour Ctrl + V, Maj + Insérer et le clic droit de la souris sur Coller, voici ce que j'ai trouvé fonctionnant sous FF, IE11 et Chrome au 21-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, ''));
        }
    });
});

Deux mises en garde:

  1. S'il y a déjà du texte lorsque le collage a lieu, le rognage est appliqué au résultat entier, pas seulement à ce qu'il est collé.

  2. Si l'utilisateur tape space ou BS ou Del puis colle, le rognage n'aura pas lieu.

0
Craig Silver