Użyłem kodu z this question dla mojej implementacji wklejenia między przeglądarkami .. działa we wszystkich przeglądanych przeze mnie przeglądarkach (przewiń w dół dla rzeczywistego rozwiązania/kodu). Należy zauważyć, że event.clipboardData wygasa natychmiast po zakończeniu wykonywania instrukcji wklejania.
Sprawdziłem cztery razy, czy działa to w Firefoksie w wersji 19 (nie mam 13 dostępnych, ale brzmi to tak, jakby pytanie dotyczyło degradacji funkcji w nowszych wersjach).
Poniżej znajduje się odpowiedź, cytowany z Nico Burns:
Rozwiązanie
Przetestowane w IE6 +, FF 3.5, niedawne-owski wersje 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>
Objaśnienie
Zdarzenie onpaste posiada funkcję handlepaste przymocowany do niej i przekazywane dwa parametry: this (to jest odnosi się do elementu, że zdarzenie jest dołączony do) i event, który jest obiektem zdarzenia.
handlepaste funkcja:
Pierwszy wiersz po prostu zapisuje zawartość edycji div do zmiennej, więc może być przywrócony ponownie na końcu.
Parametr sprawdza, czy przeglądarka jest przeglądarką internetową (chrome lub safari), a jeśli tak, ustawia zawartość edytowalnego div dla wklejonych danych. Następnie anuluje wydarzenie, aby zapobiec dwukrotnemu wklejeniu pliku Webkit. Jest tak, ponieważ webkit jest niezręczny i nie wkleja niczego, jeśli po prostu wyczyścisz div.
Jeśli to nie jest przeglądarka internetowa, to po prostu usuwa edytowalny element div.
Następnie wywołuje waitforpastedata funkcja
waitforpastedata funkcja:
Jest to konieczne, ponieważ wklejone dane nie pojawiają się od razu, więc jeśli tylko nazywa processpaste razu to byłoby miło nie ma żadnych danych do przetworzenia.
To, co robi, to sprawdzenie, czy edytowalny element div ma jakąś zawartość, jeśli wywołuje wtedy processpaste, w przeciwnym razie ustawia licznik czasu, aby się sam wywoływał i sprawdzał ponownie za 20 milisekund.
processpaste funkcja:
Funkcja ta zapisana innerHTML z edycji div (który jest teraz wklejone dane) do zmiennej, przywraca innerHTML z edycji div z powrotem do pierwotnej wartości, a ostrzec wklejone dane. Oczywiście w prawdziwym scenariuszu użytkowania prawdopodobnie chciałbyś czegoś innego niż tylko dane alarmowe, możesz zrobić tutaj cokolwiek chcesz.
Prawdopodobnie będziesz również chciał uruchomić wklejone dane poprzez pewien proces dezynfekcji danych. Można to zrobić, gdy nadal znajduje się w edytowalnym dziale div lub wyciągniętym łańcuchu.
W prawdziwej sitution będzie prawdopodobnie chcesz, aby przed zapisać ustawienia i przywrócić go później (Set cursor position on contentEditable <div>). Następnie można wstawić wklejone dane w miejscu, w którym znajdował się kursor, gdy użytkownik wkleił akcję wklejania.
P.S. Kombinacja tego kodu, IE < = 8 i jsfiddle, wydaje się nie działać, ale działa np. < = 8 w środowisku innym niż jsfiddle.
możliwy duplikat [W jaki sposób obraz wklejony z funkcji schowka działa w Gmailu i Google Chrome 12+?] (Http://stackoverflow.com/questions/6333814/how-does-the-paste-image-from- clipboard-functional-work-in-gmail-and-google-c) – epascarello
@epascarello To nie jest duplikat, ponieważ próbowałem go i nie działa w firefoxie, jak powiedziałem w poście event.clipboard nie istnieje w firefox, ale dzięki i tak – trebor
stworzyłem prosty ujednolicony interfejs próbując to zrobić w różnych przeglądarkach, może powinieneś spróbować https://github.com/Puffant/paste.js –