Intercept paste event en Javascript

Question

Intercept paste event en Javascript

y a-t-il un moyen d'intercepter L'événement paste en JavaScript et d'obtenir la valeur brute, de la modifier et de définir la valeur de L'élément DOM associé comme étant la 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 changement.

est-ce possible?

48

copy-paste dom javascript paste

demandé sur mikemaccana 2011-05-17 21:59:37

4 réponses

score 73 · Answer 1

vous pouvez intercepter l'événement paste en attachant un handler" 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.

score 3 · Answer 2

comme il se trouve, j'ai répondu à une question similaire plus tôt aujourd'hui. En bref, vous avez besoin d'un hack pour rediriger le caret vers une textarea off-screen lorsque l'événement paste démarre.

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

score 0 · Answer 4

j'avais besoin de mettre en place une" trim " sur ce qui était collé (enlever tous les espaces blancs menant et traînant) tout en permettant l'utilisation de la barre d'espace.

pour Ctrl+V, Shift+Insert et mouse right-click Paste, voici ce que j'ai trouvé travaillé en FF, IE11 et Chrome à partir de 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, ''));
        }
    });
});

deux mises en garde:

S'il y a déjà du texte lorsque la pâte se produit, le rognage se produit sur la totalité résultat, pas seulement ce qui est collé.
si l'utilisateur tape space ou BS ou Del et puis pâte, le parage ne se produira pas.

Las etiquetas más populares

Intercept paste event en Javascript

4 réponses