JavaScript get-Daten in der Zwischenablage auf einfügen-event (Cross-browser)

Lösung #1 (nur-Text-Format und erfordert Firefox 22+)

Werke für IE6+, FF 22+, Chrome, Safari, Edge
(Nur getestet in IE9+, aber sollte funktionieren für niedrigere Versionen)

Wenn Sie Unterstützung brauchen, für das einfügen von HTML-oder Firefox <= 22, siehe Lösung #2.

HTML

<div id='editableDiv' contenteditable='true'>Paste</div>

JavaScript

function handlePaste (e) {
    var clipboardData, pastedData;

    //Stop data actually being pasted into div
    e.stopPropagation();
    e.preventDefault();

    //Get pasted data via clipboard API
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text');

    //Do whatever with pasteddata
    alert(pastedData);
}

document.getElementById('editableDiv').addEventListener('paste', handlePaste);

JSFiddle: https://jsfiddle.net/swL8ftLs/12/

Beachten Sie, dass diese Lösung verwendet den parameter 'Text' für die getData - Funktion, die ist nicht standard. Jedoch, es funktioniert in allen Browsern in der Zeit des Schreibens.

Lösung #2 (HTML und funktioniert für Firefox <= 22)

Getestet in IE6+, FF 3.5+, Chrome, Safari, Edge

HTML

<div id='div' contenteditable='true'>Paste</div>

JavaScript

var editableDiv = document.getElementById('editableDiv');

function handlepaste (e) {
    var types, pastedData, savedContent;

    //Browsers that support the 'text/html' type in the Clipboard API (Chrome, Firefox 22+)
    if (e && e.clipboardData && e.clipboardData.types && e.clipboardData.getData) {

        //Check for 'text/html' in types list. See abligh's answer below for deatils on
        //why the DOMStringList bit is needed. We cannot fall back to 'text/plain' as
        //Safari/Edge don't advertise HTML data even if it is available
        types = e.clipboardData.types;
        if (((types instanceof DOMStringList) && types.contains("text/html")) || (types.indexOf && types.indexOf('text/html') !== -1)) {

            //Extract data and pass it to callback
            pastedData = e.clipboardData.getData('text/html');
            processPaste(editableDiv, pastedData);

            //Stop the data from actually being pasted
            e.stopPropagation();
            e.preventDefault();
            return false;
        }
    }

    //Everything else: Move existing element contents to a DocumentFragment for safekeeping
    savedContent = document.createDocumentFragment();
    while(editableDiv.childNodes.length > 0) {
        savedContent.appendChild(editableDiv.childNodes[0]);
    }

    //Then wait for browser to paste content into it and cleanup
    waitForPastedData(editableDiv, savedContent);
    return true;
}

function waitForPastedData (elem, savedContent) {

    //If data has been processes by browser, process it
    if (elem.childNodes && elem.childNodes.length > 0) {

        //Retrieve pasted content via innerHTML
        //(Alternatively loop through elem.childNodes or elem.getElementsByTagName here)
        var pastedData = elem.innerHTML;

        //Restore saved content
        elem.innerHTML = "";
        elem.appendChild(savedContent);

        //Call callback
        processPaste(elem, pastedData);
    }

    //Else wait 20ms and try again
    else {
        setTimeout(function () {
            waitForPastedData(elem, savedContent)
        }, 20);
    }
}

function processPaste (elem, pastedData) {
    //Do whatever with gathered data;
    alert(pastedData);
    elem.focus();
}

//Modern browsers. Note: 3rd argument is required for Firefox <= 6
if (editableDiv.addEventListener) {
    editableDiv.addEventListener('paste', handlepaste, false);
}
//IE <= 8
else {
    editableDiv.attachEvent('onpaste', handlepaste);
}

JSFiddle: https://jsfiddle.net/nicoburns/wrqmuabo/23/

Erklärung

Den onpaste Veranstaltung der div hat die handlePaste Funktion angehängt und übergeben ein einziges argument: die event - Objekt für das Ereignis paste. Von besonderem Interesse für uns ist die clipboardData Eigenschaft dieses Ereignis, das ermöglicht den Zugriff auf die Zwischenablage, die in nicht-ie-Browser. Im IE das äquivalent ist window.clipboardData, das hat zwar ein etwas anderes API.

Siehe Ressourcen-Abschnitt weiter unten.

Die handlepaste Funktion:

Diese Funktion hat zwei Niederlassungen.

Die ersten Prüfungen für die Existenz von event.clipboardData und prüft, ob es types Eigenschaft enthält: 'text/html' (types kann entweder ein DOMStringList was wird überprüft mit den contains Methode, oder eine Zeichenfolge, die überprüft wird die Verwendung der indexOf - Methode). Wenn alle diese Bedingungen erfüllt sind, dann können wir gehen, wie in die Lösung #1, nur mit "text/html "statt" text/plain". Dies funktioniert derzeit in Chrome und Firefox 22+.

Wenn diese Methode nicht unterstützt wird (alle anderen Browser), dann haben wir

1. Speichern Sie den Inhalt des Elements zu einem DocumentFragment
2. Leeren Sie das element
3. Rufen Sie die waitForPastedData Funktion

Die waitforpastedata Funktion:

Diese Funktion ersten Umfragen für die eingefügten Daten (einmal pro 20ms), die notwendig ist, weil es nicht angezeigt sofort. Wenn die Daten erschienen:

1. Speichert das innerHTML der editierbaren div (das ist jetzt der eingefügte Daten) an eine variable
2. Wiederherstellungen die gespeicherten Inhalte in der DocumentFragment
3. Nennt das 'processPaste' - Funktion mit der Daten abgerufen

Die processpaste Funktion:

Nicht beliebige Dinge mit den eingefügten Daten. In diesem Fall können wir nur warnen, den Daten, die Sie tun können, was Sie wollen. Sie werden wahrscheinlich wollen, führen Sie die eingefügten Daten durch irgendeine Art von Daten Desinfektions-Prozess.

Speichern und wiederherstellen der position des Cursors

In einem realen sitution würden Sie wahrscheinlich wollen, um die Auswahl zu speichern, bevor, und danach wieder abzurufen (Set cursor position auf contentEditable <div>). Sie können dann legen Sie die eingefügten Daten an der position des Cursors, wenn der Benutzer initiiert die Aktion einfügen.

Ressourcen:

• MDN-paste-Ereignis: https://developer.mozilla.org/en-US/docs/Web/Events/paste
• MSDN Zwischenablage: https://msdn.microsoft.com/en-us/library/ms535220(v=vs. 85).aspx
• MDN DocumentFragment: https://developer.mozilla.org/en/docs/Web/API/DocumentFragment
• MDN DomStringList: https://developer.mozilla.org/en/docs/Web/API/DOMStringList

Vielen Dank an Tim nach Unten, um zu suggerieren, die Verwendung von ein DocumentFragment, und abligh für den Fang ein Fehler in Firefox durch den Einsatz von DOMStringList anstelle einer Zeichenfolge für clipboardData.Typen

InformationsquelleAutor Nico Burns

Ich geschrieben habe, ein kleines proof-of-concept für Tim Downs Vorschlag hier mit off-screen-textarea. Und hier geht der code:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script language="JavaScript">
 $(document).ready(function()
{

var ctrlDown = false;
var ctrlKey = 17, vKey = 86, cKey = 67;

$(document).keydown(function(e)
{
    if (e.keyCode == ctrlKey) ctrlDown = true;
}).keyup(function(e)
{
    if (e.keyCode == ctrlKey) ctrlDown = false;
});

$(".capture-paste").keydown(function(e)
{
    if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){
        $("#area").css("display","block");
        $("#area").focus();         
    }
});

$(".capture-paste").keyup(function(e)
{
    if (ctrlDown && (e.keyCode == vKey || e.keyCode == cKey)){                      
        $("#area").blur();
        //do your sanitation check or whatever stuff here
        $("#paste-output").text($("#area").val());
        $("#area").val("");
        $("#area").css("display","none");
    }
});

});
</script>

</head>
<body class="capture-paste">

<div id="paste-output"></div>


    <div>
    <textarea id="area" style="display: none; position: absolute; left: -99em;"></textarea>
    </div>

</body>
</html>

Einfach kopieren und fügen Sie den gesamten code in eine html-Datei und versuchen Sie, fügen Sie (mit Strg-v) text aus der Zwischenablage irgendwo auf das Dokument.

Ich habe es getestet in IE9 und neue Versionen von Firefox, Chrome und Opera. Klappt auch ganz gut. Auch ist es gut, dass man jede Tastenkombination, die er lieber triger diese Funktionalität. Natürlich nicht vergessen die jQuery-Quellen.

Fühlen Sie sich frei, um diesen code zu verwenden und wenn Sie kommen mit einigen Verbesserungen oder Probleme bitte posten Sie zurück. Beachten Sie auch, dass ich kein Javascript-Entwickler, so kann ich Sie etwas verpasst haben (=>machen Sie Ihre eigene testign).

InformationsquelleAutor JanM

Diese macht nicht benutzen, setTimeout().

Habe ich verwendet diese großer Artikel zu erreichen, cross-browser-Unterstützung.

$(document).on("focus", "input[type=text],textarea", function (e) {
    var t = e.target;
    if (!$(t).data("EventListenerSet")) {
        //get length of field before paste
        var keyup = function () {
            $(this).data("lastLength", $(this).val().length);
        };
        $(t).data("lastLength", $(t).val().length);
        //catch paste event
        var paste = function () {
            $(this).data("paste", 1);//Opera 11.11+
        };
        //process modified data, if paste occured
        var func = function () {
            if ($(this).data("paste")) {
                alert(this.value.substr($(this).data("lastLength")));
                $(this).data("paste", 0);
                this.value = this.value.substr(0, $(this).data("lastLength"));
                $(t).data("lastLength", $(t).val().length);
            }
        };
        if (window.addEventListener) {
            t.addEventListener('keyup', keyup, false);
            t.addEventListener('paste', paste, false);
            t.addEventListener('input', func, false);
        }
        else {//IE
            t.attachEvent('onkeyup', function () {
                keyup.call(t);
            });
            t.attachEvent('onpaste', function () {
                paste.call(t);
            });
            t.attachEvent('onpropertychange', function () {
                func.call(t);
            });
        }
        $(t).data("EventListenerSet", 1);
    }
}); 

Dieser code wird erweitert mit Auswahl-handle vor dem einfügen:
demo

InformationsquelleAutor

Diese sollte auf allen Browsern, die Unterstützung der onpaste event und die mutation observer.

Diese Lösung geht einen Schritt weiter als immer nur der text, es eigentlich ermöglicht Ihnen das Bearbeiten der eingefügten Inhalte, bevor es in ein element eingefügt.

Es arbeitet mit contenteditable, onpaste event (unterstützt von allen gängigen Browsern) en mutation Beobachter (unterstützt Chrome, Firefox und IE11+)

Schritt 1

Erstellen eines HTML-Elements mit contenteditable

<div contenteditable="true" id="target_paste_element"></div>

Schritt 2

In Ihrem Javascript-code hinzufügen, wird das folgende Ereignis

document.getElementById("target_paste_element").addEventListener("paste", pasteEventVerifierEditor.bind(window, pasteCallBack), false);

Müssen wir binden pasteCallBack, da die mutation Beobachter wird asynchron aufgerufen werden.

Schritt 3

Fügen Sie die folgende Funktion zu Ihrem code

function pasteEventVerifierEditor(callback, e)
{
   //is fired on a paste event. 
    //pastes content into another contenteditable div, mutation observer observes this, content get pasted, dom tree is copied and can be referenced through call back.
    //create temp div
    //save the caret position.
    savedCaret = saveSelection(document.getElementById("target_paste_element"));

    var tempDiv = document.createElement("div");
    tempDiv.id = "id_tempDiv_paste_editor";
    //tempDiv.style.display = "none";
    document.body.appendChild(tempDiv);
    tempDiv.contentEditable = "true";

    tempDiv.focus();

    //we have to wait for the change to occur.
    //attach a mutation observer
    if (window['MutationObserver'])
    {
        //this is new functionality
        //observer is present in firefox/chrome and IE11
        //select the target node
        //create an observer instance
        tempDiv.observer = new MutationObserver(pasteMutationObserver.bind(window, callback));
        //configuration of the observer:
        var config = { attributes: false, childList: true, characterData: true, subtree: true };

        //pass in the target node, as well as the observer options
        tempDiv.observer.observe(tempDiv, config);

    }   

}



function pasteMutationObserver(callback)
{

    document.getElementById("id_tempDiv_paste_editor").observer.disconnect();
    delete document.getElementById("id_tempDiv_paste_editor").observer;

    if (callback)
    {
        //return the copied dom tree to the supplied callback.
        //copy to avoid closures.
        callback.apply(document.getElementById("id_tempDiv_paste_editor").cloneNode(true));
    }
    document.body.removeChild(document.getElementById("id_tempDiv_paste_editor"));

}

function pasteCallBack()
{
    //paste the content into the element.
    restoreSelection(document.getElementById("target_paste_element"), savedCaret);
    delete savedCaret;

    pasteHtmlAtCaret(this.innerHTML, false, true);
}   


saveSelection = function(containerEl) {
if (containerEl == document.activeElement)
{
    var range = window.getSelection().getRangeAt(0);
    var preSelectionRange = range.cloneRange();
    preSelectionRange.selectNodeContents(containerEl);
    preSelectionRange.setEnd(range.startContainer, range.startOffset);
    var start = preSelectionRange.toString().length;

    return {
        start: start,
        end: start + range.toString().length
    };
}
};

restoreSelection = function(containerEl, savedSel) {
    containerEl.focus();
    var charIndex = 0, range = document.createRange();
    range.setStart(containerEl, 0);
    range.collapse(true);
    var nodeStack = [containerEl], node, foundStart = false, stop = false;

    while (!stop && (node = nodeStack.pop())) {
        if (node.nodeType == 3) {
            var nextCharIndex = charIndex + node.length;
            if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
                range.setStart(node, savedSel.start - charIndex);
                foundStart = true;
            }
            if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
                range.setEnd(node, savedSel.end - charIndex);
                stop = true;
            }
            charIndex = nextCharIndex;
        } else {
            var i = node.childNodes.length;
            while (i--) {
                nodeStack.push(node.childNodes[i]);
            }
        }
    }

    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
}

function pasteHtmlAtCaret(html, returnInNode, selectPastedContent) {
//function written by Tim Down

var sel, range;
if (window.getSelection) {
    //IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        //Range.createContextualFragment() would be useful here but is
        //only relatively recently standardized and is not supported in
        //some browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        var firstNode = frag.firstChild;
        range.insertNode(frag);

        //Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            if (returnInNode)
            {
                range.setStart(lastNode, 0); //this part is edited, set caret inside pasted node.
            }
            else
            {
                range.setStartAfter(lastNode); 
            }
            if (selectPastedContent) {
                range.setStartBefore(firstNode);
            } else {
                range.collapse(true);
            }
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
} else if ( (sel = document.selection) && sel.type != "Control") {
    //IE < 9
    var originalRange = sel.createRange();
    originalRange.collapse(true);
    sel.createRange().pasteHTML(html);
    if (selectPastedContent) {
        range = sel.createRange();
        range.setEndPoint("StartToStart", originalRange);
        range.select();
    }
}

}

Was der code tut:

1. Jemand feuert das Ereignis paste mit Strg-v Kontext-Menü oder mit anderen Mitteln
2. In der Ereignis einfügen eines neuen Elements mit contenteditable erstellt (eines Elements mit contenteditable mit erhöhten rechten)
3. Die caret-position des target-Elements gespeichert ist.
4. Der Fokus wird auf das neue element
5. Der Inhalt wird sofort in das neue element und ist gemacht in der DOM.
6. Die mutation Beobachter fängt diese (es registriert alle änderungen an die dom-Struktur und Inhalt). Dann feuert die mutation Veranstaltung.
7. Der dom von der eingefügte Inhalt wird geklont in eine variable und kehrte zu dem Rückruf. Das temporäre element ist zerstört.
8. Der callback erhält die geklonten DOM. Das caret-Zeichen wird wiederhergestellt. Diese können Sie ändern, bevor Sie hängen Sie an Ihr Ziel. element. In diesem Beispiel bin ich mit Tim Downs Funktionen zum speichern/wiederherstellen der Einfügemarke und einfügen von HTML-Code in das element.

Vielen Dank Tim Nach Unten
Finden Sie in diesem Beitrag die Antwort:

Holen Sie sich die eingefügten Inhalte auf dem Dokument auf einfügen-Ereignis

InformationsquelleAutor Mouser

Dieser war zu lang für einen Kommentar auf Nico ' s Antwort, die ich glaube nicht, dass funktioniert auf Firefox mehr (nach den Kommentaren), und hat nicht funktioniert für mich auf Safari.

Erstens, Sie jetzt zu sein scheinen in der Lage zu Lesen direkt aus der Zwischenablage. Anstatt code wie:

if (/text\/plain/.test(e.clipboardData.types)) {
    //shouldn't this be writing to elem.value for text/plain anyway?
    elem.innerHTML = e.clipboardData.getData('text/plain');
}

verwenden:

types = e.clipboardData.types;
if (((types instanceof DOMStringList) && types.contains("text/plain")) ||
    (/text\/plain/.test(types))) {
    //shouldn't this be writing to elem.value for text/plain anyway?
    elem.innerHTML = e.clipboardData.getData('text/plain');
}

weil Firefox hat einen types Feld, das eine DOMStringList die nicht implementiert test.

Nächste Firefox wird nicht zulassen, einfügen, es sei denn, der Schwerpunkt liegt in einer contenteditable=true Feld.

Schließlich, Firefox wird nicht zulassen, fügen Sie zuverlässig es sei denn, der focus ist in einem textarea (oder vielleicht Eingang), die nicht nur contenteditable=true aber auch:

• nicht display:none
• nicht visibility:hidden
• nicht zero sized

War ich versucht zu verbergen das Textfeld, so konnte ich machen, fügen Sie über eine JS VNC-emulator (d.h., es würde zu einem remote-client und es gab keine wirklich textarea etc, einfügen in). Ich fand zu verbergen versucht das Textfeld in die oben genannten Symptome gab, wo es funktionierte manchmal, aber in der Regel nicht auf der zweiten einfügen (oder, wenn das Feld gelöscht wurde um zu verhindern, dass das einfügen der gleichen Daten doppelt) als das Feld den Fokus verloren und würde nicht richtig wieder es trotz focus(). Die Lösung, die ich kam, war um es auf z-order: -1000 machen es display:none, die es machen, wie von 1px 1px, und alle Farben transparent. Igitt.

Auf der Safari der zweite Teil der oben genannten gilt, d.h. Sie müssen eine textarea die nicht display:none.

InformationsquelleAutor abligh

Dieser arbeitete für mich :

function onPasteMe(currentData, maxLen) {
    //validate max length of pasted text
    var totalCharacterCount = window.clipboardData.getData('Text').length;
}

<input type="text" onPaste="return onPasteMe(this, 50);" />

InformationsquelleAutor Timmy Duncan

Können Sie dies tun auf diese Weise:

verwenden Sie dieses jQuery-plugin für pre & post einfügen Veranstaltungen:

$.fn.pasteEvents = function( delay ) {
    if (delay == undefined) delay = 20;
    return $(this).each(function() {
        var $el = $(this);
        $el.on("paste", function() {
            $el.trigger("prepaste");
            setTimeout(function() { $el.trigger("postpaste"); }, delay);
        });
    });
};

Nun können Sie dieses plugin verwenden;:

$('#txt').on("prepaste", function() { 

    $(this).find("*").each(function(){

        var tmp=new Date.getTime();
        $(this).data("uid",tmp);
    });


}).pasteEvents();

$('#txt').on("postpaste", function() { 


  $(this).find("*").each(function(){

     if(!$(this).data("uid")){
        $(this).removeClass();
          $(this).removeAttr("style id");
      }
    });
}).pasteEvents();

Erklärung

Ersten Satz eine uid für alle vorhandenen Elemente als data-Attribut.

Dann vergleichen Sie alle Knoten POST-PASTE-Ereignis. Also durch den Vergleich erkennen Sie das neu eingefügte einen, weil Sie dann eine uid, dann entfernen Sie einfach style/class/id-attribute von neu erstellten Elementen, so dass Sie können halten Sie Ihre älteren Formatierung.

InformationsquelleAutor Peeyush

Lassen Sie den browser einfügen wie gewohnt in Ihrem Inhalt editierbaren div-und dann nach dem einfügen swap alle span-Elemente verwendet für benutzerdefinierte text-Stile mit dem text selbst. Dies scheint zu funktionieren in internet-explorer und den anderen Browsern habe ich versucht...

$('[contenteditable]').on('paste', function (e) {
    setTimeout(function () {
        $(e.target).children('span').each(function () {
            $(this).replaceWith($(this).text());
        });
    }, 0);
});

Dieser Lösung davon ausgegangen, dass Sie jQuery und Sie nicht möchten, formatieren von text in Ihre Inhalte bearbeitbar divs.

Die plus-Seite ist, dass es super einfach.

InformationsquelleAutor DaveAlger

Einfache Lösung:

document.onpaste = function(e) {
    var pasted = e.clipboardData.getData('Text');
    console.log(pasted)
}

InformationsquelleAutor lama12345