web-dev-qa-db-fra.com

Comment capturer la valeur d'entrée sur un événement de collage?

Sur mon site, les utilisateurs peuvent coller du texte (dans ce cas une URL) dans un champ de saisie. J'aimerais saisir la valeur du texte collé à l'aide de jQuery. Je souhaite que cela fonctionne dans FF en utilisant le code ci-dessous, mais cela ne fonctionne pas dans IE (je ne pense pas que IE prenne en charge l'événement "coller").

Quelqu'un sait comment faire fonctionner cela sur tous les navigateurs modernes? J'ai trouvé quelques autres réponses à cela sur SO mais la plupart ne sont que des FF et aucune ne semblait offrir une solution complète.

Voici le code que j'ai jusqu'à présent:

$("input.url").live('paste', function(event) {
    var _this = this;
    // Short pause to wait for paste to complete
    setTimeout( function() {
        var text = $(_this).val();
        $(".display").html(text);
    }, 100);
});

JSFiddle: http://jsfiddle.net/TZWsB/1/

javascriptjqueryhtml
19
rolling stone

jQuery a un problème avec la méthode live avec l'événement-coller dans IE; solution de contournement:

$(document).ready(function() {
    $(".url").bind('paste', function(event) {
        var _this = this;
        // Short pause to wait for paste to complete
        setTimeout( function() {
            var text = $(_this).val();
            $(".display").html(text);
        }, 100);
    });
});

Fiddle: http://jsfiddle.net/Trg9F/

26
scessor
$('input').on('paste', function(e) {
    // common browser -> e.originalEvent.clipboardData
    // uncommon browser -> window.clipboardData
    var clipboardData = e.clipboardData || e.originalEvent.clipboardData || window.clipboardData;
    var pastedData = clipboardData.getData('text');
});
18
Sakamoto Riku

Écoutez l’événement change ainsi que paste. change lancera de manière fiable sur un champ modifié avant la soumission, alors que paste n’apparaît que sur les navigateurs qui le prennent en charge sur un collage explicite; il ne sera pas déclenché par d'autres actions d'édition telles que glisser-déposer, couper-copier, annuler-rétablir, vérification orthographique, substitution d'IME, etc.

Le problème avec change est qu’elle ne se déclenche pas immédiatement, uniquement lorsque l’édition dans un champ est terminée. Si vous souhaitez intercepter toutes les modifications au fur et à mesure, l'événement sera input... sauf qu'il s'agit d'une nouvelle fonctionnalité HTML5 qui n'est pas prise en charge partout (notamment: IE <9). Vous pouvez presque le faire en prenant tous ces événements:

$('.url').bind('input change paste keyup mouseup',function(e){
    ...
});

Mais si vous voulez définitivement attraper rapidement tous les changements sur les navigateurs qui ne prennent pas en charge input, vous n’avez pas d’autre choix d’interroger la valeur sur setInterval.

17
bobince

Encore mieux, utilisez-vous e.originalEvent.clipboardData.getData ('text'); récupérer des données collées;

$("input").on("paste", function(e) { 
    var pastedData = e.originalEvent.clipboardData.getData('text');
    // ... now do with pastedData whatever you like ...
});

De cette façon, vous pouvez éviter les délais d'attente et cela est supporté par tous les principaux navigateurs.

3
Triple S

Essayez peut-être d’utiliser plutôt l’événement onblur. Ainsi, l’utilisateur c/p entre dans l’entrée et quand ils quittent le champ, le script vérifie ce qui est là. Cela pourrait économiser beaucoup de tracas, car cela fonctionne pour la souris et la touche c/p ainsi que pour la saisie manuelle. 

0
qw3n