218 votes

Capturez l'entrée collée

Je cherche un moyen d'assainir les données que je colle dans le navigateur. Est-il possible de le faire avec jQuery ?

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

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

Malheureusement, mon développement s'est arrêté net à cause de ce problème "mineur". Je serais vraiment un campeur heureux si quelqu'un pouvait m'indiquer la bonne direction.

6 votes

Veuillez marquer stackoverflow.com/a/1503425/749232 comme réponse à l'usage d'autres personnes rencontrant le même problème. Cela a résolu le problème pour moi.

2 votes

.live() est déprécié depuis jquery 1.9, ils recommandent .on() à la place.

0 votes

348voto

Evgeni Dimov Points 1869

OK, je viens de rencontrer le même problème J'ai fait le tour par le long chemin

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

Juste un petit temps d'attente jusqu'à ce que le func .val() puisse être rempli.

E.

21 votes

Que faire s'il y a déjà du texte dans la zone de texte et que vous le collez, et que vous voulez juste le texte collé ?

41 votes

Cela fonctionne parfaitement, merci. Un timeout de 0 fonctionne tout aussi bien. La fonction a juste besoin d'être reportée à la boucle suivante.

0 votes

@barfoon Assurez-vous juste de nettoyer le textarea à la fin de votre délai, après vous avez saisi la valeur. De cette façon, il est restauré à l'état propre après chaque collage.

45voto

Xue Liangliang Points 71

Pour la compatibilité avec les autres plates-formes, il doit gérer les événements oninput et onpropertychange :

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

2 votes

Une belle solution qui fonctionne à la fois comme un collage et une capture d'événement de type keyup. Note : Pour une raison quelconque, la fonction d'événement se déclenche deux fois si vous mettez en évidence le contenu de l'entrée. et ensuite tapez quelque chose au moins IE8 (pas important dans de nombreux cas, mais peut-être très important dans d'autres).

0 votes

Joli ! Je ne connaissais pas celui-ci, et il correspond parfaitement à mes besoins !

19voto

Je l'ai en quelque sorte résolu 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);
    }
});

Il ne me reste plus qu'à enregistrer l'emplacement du curseur et à l'ajouter à cette position, et tout sera prêt... Je pense :)

1 votes

Comment avez-vous enregistré l'emplacement du caret ?

0 votes

@Petah Vous pourriez vérifier quel élément a le focus avec .find(':focus') et, connaissant cet élément, déterminer l'emplacement du caret. Voir ce .

0 votes

Rappelez-vous que "live" est déprécié au profit de "on".

10voto

moff Points 4713

Hmm... I pensez à vous pouvez utiliser e.clipboardData pour attraper les données qui sont collées. Si ça ne marche pas, jetez un coup d'œil. ici .

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

2 votes

Lorsque je l'exécute dans Safari, j'obtiens 'undefined' :(

1 votes

ClipboardData est sandboxé sur la plupart des navigateurs (faille de sécurité évidente).

2 votes

Internet Explorer uniquement !

9voto

Eric Points 198

Écouter l'événement coller et définir un écouteur d'événement keyup. Lors du keyup, capturez la valeur et supprimez l'écouteur d'événement keyup.

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

6 votes

C'est très bien, mais cela ne fonctionne pas pour le collage par clic droit.

0 votes

Cela ne fonctionne pas non plus pour le collage par le clic central (X11) ; cela ne fonctionne que s'ils ont utilisé le clavier pour coller.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X