web-dev-qa-db-fra.com

jQuery bind to Paste Event, comment obtenir le contenu du collage

J'ai un plugin jQuery Token Tagit et je veux lier à l'événement Coller pour ajouter des éléments correctement.

Je suis capable de me lier à l'événement paste comme ceci:

    .bind("paste", paste_input)

...

function paste_input(e) {
    console.log(e)
    return false;
}

Comment puis-je obtenir la valeur réelle du contenu collé?

javascriptjquerycopy-pastepaste
63
AnApprentice

Il existe un événement onpaste qui fonctionne dans les navigateurs modernes. Vous pouvez accéder aux données collées à l'aide de la fonction getData de l'objet clipboardData.

$("#textareaid").bind("paste", function(e){
    // access the clipboard using the api
    var pastedData = e.originalEvent.clipboardData.getData('text');
    alert(pastedData);
} );

Notez que bind et nbind sont obsolètes à partir de jQuery 3. L'appel préféré est on .

Tous les navigateurs modernes supportent le API Clipboard .

Voir aussi: Dans Jquery Comment gérer coller?

119
jeff

Que diriez-vous de ceci: http://jsfiddle.net/5bNx4/

Veuillez utiliser .on si vous utilisez jq1.7 et al.

Comportement: Lorsque vous tapez quelque chose ou paste quoi que ce soit sur le premier texte, la zone de travail ci-dessous capture le changement.

Reste j'espère que cela aide la cause. :)

Lien utile =>

Comment gérez-vous oncut, oncopy et onpaste dans jQuery?

Catch coller input

code 

$(document).ready(function() {
    var $editor    = $('#editor');
    var $clipboard = $('<textarea />').insertAfter($editor);

    if(!document.execCommand('StyleWithCSS', false, false)) {
        document.execCommand('UseCSS', false, true);
    }

    $editor.on('paste, keydown', function() {
        var $self = $(this);            
        setTimeout(function(){ 
            var $content = $self.html();             
            $clipboard.val($content);
        },100);
     });
});
17
Tats_innit

J'ai récemment eu besoin d'accomplir quelque chose de similaire à cela. J'ai utilisé le design suivant pour accéder à l'élément et à la valeur de la pâte. démo jsFiddle

$('body').on('paste', 'input, textarea', function (e)
{
    setTimeout(function ()
    {
        //currentTarget added in jQuery 1.3
        alert($(e.currentTarget).val());
        //do stuff
    },0);
});
7
Kevin

Une autre approche: cet événement input capturera également l’événement paste.

$('textarea').bind('input', function () {
    setTimeout(function () { 
        console.log('input event handled including paste event');
    }, 0);
});
3
Shahar Shokrani
$(document).ready(function() {
    $("#editor").bind('paste', function (e){
        $(e.target).keyup(getInput);
    });

    function getInput(e){
        var inputText = $(e.target).html(); /*$(e.target).val();*/
        alert(inputText);
        $(e.target).unbind('keyup');
    }
});
2
Cyrus

Vous pouvez comparer la valeur d'origine 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);
    });
});
1
Alo Sarv

Cela fonctionne sur tous les navigateurs pour obtenir une valeur collée. Et aussi pour créer une méthode commune à toutes les zones de texte.

$("#textareaid").bind("paste", function(e){       
    var pastedData = e.target.value;
    alert(pastedData);
} )
1
Mukesh Kalgude

Il semblerait que cet événement soit associé à une propriété clipboardData (il peut être imbriqué dans la propriété originalEvent.). Le clipboardData contient un tableau d'éléments et chacun de ces éléments a une fonction getAsString() que vous pouvez appeler. Ceci retourne la représentation sous forme de chaîne de ce qu'il y a dans l'élément.

Ces éléments ont également une fonction getAsFile(), ainsi que d’autres qui sont spécifiques au navigateur (par exemple, dans les navigateurs Webkit, il existe une fonction webkitGetAsEntry()).

Pour mes besoins, j'avais besoin de la valeur de chaîne de ce qui est collé. Alors, j'ai fait quelque chose de similaire à ceci:

$(element).bind("paste", function (e) {
    e.originalEvent.clipboardData.items[0].getAsString(function (pStringRepresentation) {
        debugger; 
        // pStringRepresentation now contains the string representation of what was pasted.
        // This does not include HTML or any markup. Essentially jQuery's $(element).text()
        // function result.
    });
});

Vous voudrez effectuer une itération à travers les éléments en conservant un résultat de concaténation de chaîne.

Le fait qu’il existe un grand nombre d’articles me fait penser qu’il faudra encore travailler sur chaque élément. Vous voudrez également faire des vérifications null/valeur.

1
Chandler Zwolle

Sur les navigateurs modernes, rien de plus simple: il suffit d'utiliser l'événement input avec l'attribut inputType :

$(document).on('input', 'input, textarea', function(e){
  if (e.originalEvent.inputType == 'insertFromPaste') {
    alert($(this).val());
  }
});

https://codepen.io/anon/pen/jJOWxg

0
Yarin