Ermitteln Sie ein Einfügen-Ereignis in einem contenteditable

gegeben, einer content-editable div. Wie kann ich erkennen, ein paste-Ereignis, verhindern, dass die paste aus eingefügt werden können, so kann ich Sie abfangen kann und desinfizieren Sie die paste, um die text enthalten nur?

Ich auch nicht wollen, zu verlieren Fokus, nachdem die paste + desinfizieren abgeschlossen ist.

InformationsquelleAutor der Frage Rachela Meadows | 2011-11-19

  1. 21

    UPDATE:

    Allen gängigen Browsern können Sie nun Zugriff auf die Daten aus der Zwischenablage in ein paste-Ereignis. Sehen Nico Brennt ' s Antwort ein Beispiel für die neueren browser und auch check-out Tim Down ' s Antwort wenn Sie brauchen, um die Unterstützung für ältere Browser.

    Können Sie hören, für die onPaste event auf dem div zu erkennen, die paste. Wenn Sie wollen, nur deaktivieren Sie die paste, die Sie anrufen können event.preventDefault() aus, dass die Zuhörer.

    Zur Erfassung der eingefügten Inhalte, ist jedoch ein wenig schwieriger, da die onPaste Veranstaltung nicht geben Ihnen Zugriff auf die eingefügten Inhalte. Der übliche Weg, dies zu behandeln ist, um die folgenden von der onPaste event-handler:

    • erstellen Sie ein dummy-div-Element und platzieren Sie es außerhalb der Fenstergrenzen, so dass es nicht sichtbar für die Besucher
    • verschieben des Fokus auf dieses div
    • rufen Sie einen sanitizer-Verfahren mit einer setTimeout(sanitize, 0)

    und aus Ihrer Desinfektion Methode:

    • finden die dummy-div und erhalten Sie den Inhalt
    • sanitize HTML und entfernen Sie die div
    • verschieben des Fokus zurück auf das original-div
    • legen Sie die sanitized-Inhalt in die ursprüngliche div

    InformationsquelleAutor der Antwort dcro

Schreibe einen Kommentar