Intercepter coller des événements en Javascript

Est-il un moyen d'intercepter la pâte d'événements en JavaScript et d'obtenir la valeur brute, modifier, et de le configurer de l'élément DOM de la valeur à la valeur modifiée?

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

Est-ce possible?

InformationsquelleAutor Brandon | 2011-05-17
  1. 78

    Vous pouvez intercepter la pâte événement par la fixation d'un "onpaste" de gestionnaire et d'obtenir le texte collé à l'aide de "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 notes, vous aurez besoin d'utiliser "e.originalEvent.clipboardData" si à l'aide de jQuery.

    • Quand je fais le code ci-dessus dans IE, mais faire ce qui suit: myElement.Value = pastedText.split(' ').join(''); il définit la valeur à l'origine collé valeur. Des idées? J'ai ajouté cette case alert(myElement.Value); et je suis de retour vrai et la valeur semble correct dans mon alerte, mais ne s'affiche pas correctement sur ma page.
    • Elle ne semble pas fonctionner dans Firefox.
    • Par le retour de "vrai", vous permettant à la valeur par défaut de "coller" gestionnaire de se produire après votre propre gestionnaire, qui seront il suffit de coller le texte de votre traitement personnalisé. Le retour de "faux" empêche le collage par défaut du gestionnaire de l'exécution (c'est pourquoi je l'ai fait dans mon exemple).
    • Il ressemble à Firefox n'autorise pas les opérations de presse-papiers...
    • La question de @maerics lié à se réfère à la configuration de données de presse-papiers qui Firefox ne permet pas. La lecture des données du presse-papiers à partir d'une pâte événement fonctionne comme indiqué dans la réponse, bien que n'étant pas dans les anciennes versions de FF.
    • Quel est le navigateur de l'aide pour cela?
    • Dans Fireofx il fonctionne que si concentré dans la zone de saisie.
    • Pour ceux qui, comme moi, étaient à la recherche de la dernière pièce du puzzle "ensemble de la zone de texte valeur avec la valeur analysée.", Je l'ai utilisé pour faire la finale coller "du document.execCommand("insertText", false, pastedText);"
    • vous pouvez également symply return true à la fin.
    • cela ne fonctionnera pas si vous effectuez tout type de manipulation à pastedText. Droit?

    InformationsquelleAutor maerics
  2. 3

    Comme il arrive, j'ai répondu à une question similaire plus tôt aujourd'hui. En bref, vous avez besoin d'un hack pour rediriger le signe d'un écran textarea quand la pâte événement se déclenche.

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

    J'avais besoin pour mettre en œuvre un "trim" sur ce qui a été collé (supprimer toutes les attaque et de fuite des espaces) tout en permettant l'utilisation de la barre d'espace.

    Pour Ctrl+V Maj+Insérer et droit de la souris-cliquez sur Coller, voici ce que j'ai trouvé travaillé dans FF, IE11 et Chrome comme 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:

    1. Si il y a déjà du texte lorsque la pâte se produit, le parage se produit sur le résultat entier, et pas seulement ce qu'il soit collé.

    2. Si l'utilisateur tape l'espace ou la chambre d'hôte ou Del et puis colle, de coupe n'aura pas lieu.

    InformationsquelleAutor Craig Silver