Ho utilizzato il codice da this question per la mia implementazione di incollaggio cross-browser. Funziona su tutti i browser che ho testato (scorrere verso il basso per la soluzione/codice attuale). Va notato che event.clipboardData scade immediatamente dopo che l'evento paste ha completato l'esecuzione.
Sono andato avanti e quadruplo ho controllato che funzioni in Firefox versione 19 (non ne ho 13 disponibili, ma sembra che questa domanda riguardasse il degrado di una funzionalità nelle versioni più recenti).
Di seguito è la risposta, citato da Nico Burns:
Soluzione
Testato in IE6 +, FF 3.5+, le versioni recenti-ish di Opera, Chrome, Safari.
function handlepaste (elem, e) {
var savedcontent = elem.innerHTML;
if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
if (/text\/html/.test(e.clipboardData.types)) {
elem.innerHTML = e.clipboardData.getData('text/html');
}
else if (/text\/plain/.test(e.clipboardData.types)) {
elem.innerHTML = e.clipboardData.getData('text/plain');
}
else {
elem.innerHTML = "";
}
waitforpastedata(elem, savedcontent);
if (e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}
return false;
}
else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
elem.innerHTML = "";
waitforpastedata(elem, savedcontent);
return true;
}
}
function waitforpastedata (elem, savedcontent) {
if (elem.childNodes && elem.childNodes.length > 0) {
processpaste(elem, savedcontent);
}
else {
that = {
e: elem,
s: savedcontent
}
that.callself = function() {
waitforpastedata(that.e, that.s)
}
setTimeout(that.callself,20);
}
}
function processpaste (elem, savedcontent) {
pasteddata = elem.innerHTML;
//^^Alternatively loop through dom (elem.childNodes or elem.getElementsByTagName) here
elem.innerHTML = savedcontent;
// Do whatever with gathered data;
alert(pasteddata);
}
<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>
Spiegazione
L'evento onpaste ha la funzione handlepaste collegato ad esso, e passò due argomenti this (cioè un riferimento all'elemento che l'evento è attaccato) e event che è l'oggetto evento.
La funzione handlepaste:
La prima riga salva semplicemente il contenuto del div modificabile a una variabile in modo che possa essere ripristinato di nuovo alla fine.
Il if controlla se il browser è un browser Webkit (chrome o safari) e se è esso imposta i contenuti del div modificabile sui dati che vengono incollati. Quindi annulla l'evento per evitare che il webkit incolli qualcosa due volte. Questo perché il webkit è scomodo e non incollerà nulla se si cancella semplicemente il div.
Se non è un browser webkit, cancella semplicemente il div modificabile.
E poi chiama la funzione di waitforpastedata
La funzione waitforpastedata:
Ciò è necessario perché i dati incollato non appare immediatamente, quindi se appena chiamato processpaste subito allora wouldn avere dati da elaborare
Quello che fa è controllare se il div modificabile ha qualche contenuto, se lo fa chiama processpaste, altrimenti imposta un timer per chiamarsi e ricontrollare in 20 millisecondi.
La processpaste funzione:
Questa funzione ha salvato l'innerHTML del div modificabile (che ora i dati incollati) ad una variabile, ripristina l'innerHTML del div modificabile torna al suo valore originale, e l'avviso i dati incollati. Ovviamente in uno scenario di utilizzo reale probabilmente vorresti qualcosa di diverso dai soli dati di avviso, puoi fare quello che vuoi con esso da qui.
Probabilmente vorrete anche eseguire i dati incollati attraverso una sorta di processo di sanificazione dei dati. Questo può essere fatto mentre è ancora nel div editabile, o sulla stringa estratta.
In un vero e proprio sitution probabilmente si vuole salvare la selezione prima, e ripristinarlo successivamente (Set cursor position on contentEditable <div>). È quindi possibile inserire i dati incollati nella posizione in cui si trovava il cursore quando l'utente ha avviato l'azione Incolla.
P.S. La combinazione di questo codice, IE = 8 e jsfiddle non sembra funzionare, ma funziona in es. < = 8 in un ambiente non jsfiddle.
possibile duplicato di [Come funziona l'immagine incollata dalle funzionalità degli Appunti in Gmail e Google Chrome 12+?] (Http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from- appunti-funzionalità-lavoro-in-gmail-e-google-c) – epascarello
@epascarello Non è proprio un duplicato, perché l'ho provato e non funziona in firefox come ho detto nel post event.clipboard non esiste in firefox, ma grazie comunque – trebor
ho creato una semplice interfaccia unificata cercando di farlo con diversi browser, forse dovresti provare https://github.com/Puffant/paste.js –