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

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?

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?

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);
     });
});

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);
});

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);
});

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

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);
} )

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);
    });
});

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.

In modernen Browsern ist es einfach: Verwenden Sie einfach das Eingabeereignis zusammen mit dem inputType- Attribut:

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

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