web-dev-qa-db-fra.com

Catch coller l'entrée

Je cherche un moyen de nettoyer les entrées que je colle dans le navigateur. Est-ce possible de le faire avec jQuery?

J'ai réussi à trouver cela jusqu'à présent:

$(this).live(pasteEventName, function(e) {
 // this is where i would like to sanitize my input
 return false;
}

Malheureusement, mon développement a connu un essoufflement à cause de ce problème "mineur". Je ferais vraiment de moi un campeur heureux si quelqu'un pouvait me diriger dans la bonne direction.

jquerypastesanitize
199
Christoffer Winterkvist

Je l'ai en quelque sorte corrigé en utilisant le code suivant:

$("#editor").live('input paste',function(e){
    if(e.target.id == 'editor') {
        $('<textarea></textarea>').attr('id', 'paste').appendTo('#editMode');
        $("#paste").focus();
        setTimeout($(this).paste, 250);
    }
});

Maintenant, j'ai juste besoin de stocker l'emplacement du curseur et de l'ajouter à cette position, alors je suis prêt ... je pense :)

18
Christoffer Winterkvist

OK, juste tombé dans le même problème .. Je suis allé sur le long chemin

$('input').on('paste', function () {
  var element = this;
  setTimeout(function () {
    var text = $(element).val();
    // do something with text
  }, 100);
});

Juste un petit délai jusqu'à ce que .val () func puisse être peuplé.

E.

324
Evgeni Dimov

Vous pouvez réellement récupérer la valeur directement à partir de événement . C'est un peu obtus comment y arriver.

Renvoie false si tu ne veux pas que ça passe.

$(this).on('paste', function(e) {

  var pasteData = e.originalEvent.clipboardData.getData('text')

});
60
Charles Haro

Pour la compatibilité entre plates-formes, il convient de gérer les événements en entrée et en propriété:

$ (something).bind ("input propertychange", function (e) {
    // check for paste as in example above and
    // do something
})
41
Xue Liangliang

Hmm ... je pense que vous pouvez utiliser e.clipboardData pour récupérer les données en cours de collage. Si ça ne marche pas, regardez ici .

$(this).live("paste", function(e) {
    alert(e.clipboardData); // [object Clipboard]
});
10
moff

Écoutez l’événement coller et définissez un écouteur d’événement keyup. Sur keyup, capturez la valeur et supprimez l'écouteur d'événements keyup.

$('.inputTextArea').bind('paste', function (e){
    $(e.target).keyup(getInput);
});
function getInput(e){
    var inputText = $(e.target).val();
    $(e.target).unbind('keyup');
}
9
Eric

Cela se rapproche de ce que vous pourriez vouloir.

function sanitize(s) {
  return s.replace(/\bfoo\b/g, "~"); 
};

$(function() {
 $(":text, textarea").bind("input paste", function(e) {
   try {
     clipboardData.setData("text",
       sanitize(clipboardData.getData("text"))
     );
   } catch (e) {
     $(this).val( sanitize( $(this).val() ) );
   }
 });
});

Veuillez noter que lorsque l’objet clipboardData n’est pas trouvé (sur les navigateurs autres que IE), vous obtenez actuellement la valeur complète de l’élément + la valeur correspondant au presse-papier.

Vous pouvez probablement faire quelques étapes supplémentaires pour dif les deux valeurs, avant une entrée et après l’entrée, si vous êtes vraiment après que les données ont été vraiment collées dans l’élément.

6
Mister Lucky
 $('').bind('input propertychange', function() {....});

Cela fonctionnera pour un événement de collage de souris.

5
Abhiram
$("#textboxid").on('input propertychange', function () {
    //perform operation
        });

Cela fonctionnera bien.

5
Rajat Jain

Pourquoi ne pas comparer la valeur initiale du champ et la valeur modifiée du champ et déduire la différence en tant que valeur collée? Ceci intercepte le texte collé correctement même s'il y a du texte existant dans le champ.

http://jsfiddle.net/6b7sK/

function text_diff(first, second) {
    var start = 0;
    while (start < first.length && first[start] == second[start]) {
        ++start;
    }
    var end = 0;
    while (first.length - end > start && first[first.length - end - 1] == second[second.length - end - 1]) {
        ++end;
    }
    end = second.length - end;
    return second.substr(start, end - start);
}
$('textarea').bind('paste', function () {
    var self = $(this);
    var orig = self.val();
    setTimeout(function () {
        var pasted = text_diff(orig, $(self).val());
        console.log(pasted);
    });
});
5
Alo Sarv

Ce code fonctionne pour moi soit coller à partir d'un clic droit ou copier directement coller

   $('.textbox').on('paste input propertychange', function (e) {
        $(this).val( $(this).val().replace(/[^0-9.]/g, '') );
    })

Lorsque je colle Section 1: Labour Cost, il devient 1 dans la zone de texte.

Pour n'autoriser que la valeur flottante, j'utilise ce code

 //only decimal
    $('.textbox').keypress(function(e) {
        if(e.which == 46 && $(this).val().indexOf('.') != -1) {
            e.preventDefault();
        } 
       if (e.which == 8 || e.which == 46) {
            return true;
       } else if ( e.which < 48 || e.which > 57) {
            e.preventDefault();
      }
    });
5
RN Kushwaha
document.addEventListener('paste', function(e){
    if(e.clipboardData.types.indexOf('text/html') > -1){
        processDataFromClipboard(e.clipboardData.getData('text/html'));
        e.preventDefault();

        ...
    }
});

Plus loin:

4
davidcondrey

Voir cet exemple: http://www.p2e.dk/diverse/detectPaste.htm

Il surveille essentiellement chaque modification avec un événement oninput, puis vérifie s’il s’agit d’une comparaison coller/chaîne. Oh, et dans IE, il y a un événement onpaste. Alors:

$ (something).bind ("input paste", function (e) {
    // check for paste as in example above and
    // do something
})
3
Ilya Birman

Cette méthode utilise jqueries contents (). Unwrap ().

  1. Tout d'abord, détecter l'événement de collage
  2. Ajoutez une classe unique aux balises déjà présentes dans l’élément dans lequel nous collons.

  3. Après un délai donné, parcourez tout le contenu en décompressant les balises n’ayant pas la classe définie précédemment. Remarque: cette méthode ne supprime pas les balises à fermeture automatique comme
    Voir un exemple ci-dessous.

    //find all children .find('*') and add the class .within .addClass("within") to all tags
$('#answer_text').find('*').each(function () {
$(this).addClass("within");
});
setTimeout(function() {
$('#answer_text').find('*').each(function () {
    //if the current child does not have the specified class unwrap its contents
    $(this).not(".within").contents().unwrap();
});
}, 0);
1
Shadrack B. Orina

Cela s'est avéré être assez illusoire. La valeur de l'entrée n'est pas mise à jour avant l'exécution du code dans la fonction d'événement de collage. J'ai essayé d'appeler d'autres événements à partir de la fonction événement de collage, mais la valeur d'entrée n'est toujours pas mise à jour avec le texte collé dans la fonction des événements. C'est tous les événements en dehors de keyup. Si vous appelez keyup à partir de la fonction d'événement de collage, vous pouvez effacer le texte collé à partir de la fonction d'événement de keyup. ainsi...

$(':input').live
(
    'input paste',
    function(e)
    {
        $(this).keyup();
    }
);

$(':input').live
(
    'keyup',
    function(e)
    {
        // sanitize pasted text here
    }
);

Il y a une mise en garde ici. Dans Firefox, si vous réinitialisez le texte saisi à chaque incrustation, si le texte est plus long que la zone visible autorisée par la largeur de saisie, la réinitialisation de la valeur à chaque incrustation annule la fonctionnalité du navigateur qui fait défiler automatiquement le texte à la position du curseur à la position précédente. fin du texte. Au lieu de cela, le texte revient au début, laissant le curseur de vue.

0
James Tindall