it-swarm.com.de

jQuery bind to Paste Event, um den Inhalt der Paste zu erhalten

Ich habe ein JQuery-Token-Tagit-Plugin und möchte eine Bindung zum Einfügeereignis herstellen, 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ächlichen Wert des eingefügten Inhalts ermitteln?

63
AnApprentice

Es gibt ein Onpaste-Ereignis, das in modernen Browsern funktioniert. Sie können auf die eingefügten Daten zugreifen, indem Sie die Funktion getData für das Objekt clipboardData verwenden.

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

Beachten Sie, dass bind und nfind ab jQuery 3 veraltet sind. Der bevorzugte Aufruf ist on .

Alle modernen Browser unterstützen die Zwischenablage API .

Siehe auch: In Jquery Wie geht man mit Paste um?

119
jeff

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

Benutzen Sie bitte .on Wenn Sie jq1.7 et al.

Verhalten: Wenn Sie irgendetwas oder paste irgendetwas in das erste Textfeld eingeben, erfasst das untere Textfeld den Cahnge.

Ruhe ich hoffe es hilft der Sache. :)

Hilfreicher Link =>

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

Catch Paste 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

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

Ein anderer Ansatz: Dieses input -Ereignis fängt auch das paste -Ereignis ab.

$('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

Sie können den ursprünglichen Wert des Feldes mit dem geänderten Wert des Feldes vergleichen und die Differenz als eingefügten Wert abziehen. Dadurch wird der eingefügte Text korrekt abgefangen, auch 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);
    });
});
1
Alo Sarv

Diese funktionieren in allen Browsern, um den 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);
} )
1
Mukesh Kalgude

Anscheinend ist diesem Ereignis eine clipboardData -Eigenschaft zugeordnet (möglicherweise ist sie in der originalEvent -Eigenschaft verschachtelt). Das clipboardData enthält ein Array von Elementen, und jedes dieser Elemente verfügt über eine getAsString() -Funktion, die Sie aufrufen können. Dies gibt die Zeichenfolgendarstellung des Inhalts des Elements zurück.

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

Für meine Zwecke benötigte ich den Zeichenfolgewert 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 Zeichenfolgenverkettung beibehalten.

Die Tatsache, dass es eine Reihe von Elementen gibt, lässt mich denken, dass mehr Arbeit getan werden muss, indem jedes Element analysiert wird. Sie sollten auch einige Null-/Wertprüfungen durchführen.

1
Chandler Zwolle

In modernen Browsern ist es einfach: Verwenden Sie einfach das Eingabe -Ereignis zusammen mit dem EingabeTyp -Attribut:

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

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

0
Yarin