jQuery-Bindung an Einfügeereignis, wie der Inhalt der Einfügung abgerufen wird

75

Ich habe ein JQuery-Token-Tagit-Plugin und möchte an das Einfügeereignis binden, um Elemente korrekt hinzuzufügen.

Ich kann mich wie folgt an das Einfügeereignis binden:

    .bind("paste", paste_input)

...

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

Wie kann ich den tatsächlich eingefügten Inhaltswert erhalten?

Ein Lehrling
quelle

Antworten:

143

Es gibt ein Onpaste-Ereignis, das in modernen Browsern funktioniert. Sie können mit der getDataFunktion für das clipboardDataObjekt auf die eingefügten Daten zugreifen .

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

Beachten Sie, dass binden und unbind veraltet sind als von jQuery 3. Der bevorzugte Anruf ist auf .

Alle modernen Browser unterstützen die Zwischenablage-API .

Siehe auch: In Jquery Wie gehe ich mit Paste um?

Jeff
quelle
7
Dieser Code gibt einen Fehler in der var pastedData =Zeile aus : Uncaught TypeError: Cannot read property 'getData' of undefined. Sie müssen sich ändern e.clipboardDatazu e.originalEvent.clipboardData. Ich vermute, weil jquery das eigentliche Einfügeereignis in ein eigenes Ereignis einwickelt - zitieren Sie mich jedoch nicht dazu.
FireWingLead
1
e.originalEvent.clipboardData.getData('text/plain')arbeitete für mich
Sridhar
3
falls Sie es brauchen, die Lösung für IE:window.clipboardData.getData('text')
DdW
Sie können Ereignishandler zu pasteund inputEreignisse hinzufügen , ein Flag für den pasteEreignishandler setzen und im inputEreignishandler nach diesem Flag suchen. Darin this.valueist der Wert eingefügt, und dies funktioniert in IE11.
Niloct
19

Wie wäre es damit: http://jsfiddle.net/5bNx4/

Bitte verwenden Sie, .onwenn Sie jq1.7 et al.

Verhalten: Wenn Sie pasteim ersten Textbereich etwas oder etwas eingeben, erfasst der folgende Teebereich den Cahnge.

Ruhe Ich hoffe es hilft der Sache. :)

Hilfreicher Link =>

Wie gehen Sie mit oncut, oncopy und onpaste in jQuery um?

Catch-Paste-Eingabe

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);
     });
});
Tats_innit
quelle
1
@ Raminson Ja, ich war undefinedfür ein paar Tage innit:P
Tats_innit
1
Es passt nicht zum Einfügen des Kontextmenüs (Rechtsklick + Einfügen), irgendwelche Ideen dazu?
0_o
11

Ich musste kürzlich etwas Ähnliches erreichen. Ich habe das folgende Design verwendet, um auf das Einfügeelement und den Wert zuzugreifen. jsFiddle-Demo

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

Ein anderer Ansatz: Dieses inputEreignis wird auch das pasteEreignis erfassen.

$('textarea').bind('input', function () {
    setTimeout(function () { 
        console.log('input event handled including paste event');
    }, 0);
});
Shahar Shokrani
quelle
2
$(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');
    }
});
Cyrus
quelle
2

Dies funktioniert in allen Browsern, um einen eingefügten Wert zu erhalten. Und auch zum Erstellen einer gemeinsamen Methode für alle Textfelder.

$("#textareaid").bind("paste", function(e){       
    var pastedData = e.target.value;
    alert(pastedData);
} )
Mukesh Kalgude
quelle
1
e.target.valueMöglicherweise benötigen Sie setTimeout stackoverflow.com/a/1503425/577052
Bernhard Döbler
1

Sie können den ursprünglichen Wert des Felds und den geänderten Wert des Felds vergleichen und die Differenz als eingefügten Wert abziehen. Dadurch wird der eingefügte Text auch dann korrekt erfasst, wenn im Feld bereits Text vorhanden ist.

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);
    });
});
Alo Sarv
quelle
1

Es scheint, als ob diesem Ereignis eine clipboardDataEigenschaft zugeordnet ist (es kann in der originalEventEigenschaft verschachtelt sein ). Das clipboardDataenthält eine Reihe von Elementen, und jedes dieser Elemente verfügt über eine getAsString()Funktion, die Sie aufrufen können. Dies gibt die Zeichenfolgendarstellung des Elements zurück.

Diese Elemente haben auch eine getAsFile()Funktion sowie einige andere, die browserspezifisch sind (z. B. in Webkit-Browsern gibt es eine webkitGetAsEntry()Funktion).

Für meine Zwecke benötigte ich den Zeichenfolgenwert dessen, was eingefügt wird. Also habe ich etwas Ähnliches gemacht:

$(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.
    });
});

Sie möchten eine Iteration durch die Elemente durchführen und dabei das Ergebnis der Verkettung von Zeichenfolgen beibehalten.

Die Tatsache, dass es eine Reihe von Elementen gibt, lässt mich denken, dass mehr Arbeit geleistet werden muss, um jedes Element zu analysieren. Sie möchten auch einige Null- / Wertprüfungen durchführen.

Chandler Zwolle
quelle
1
Könnten Sie bitte markieren, für welche Browser dies gilt?
Owen Beresford