Solution
Testé dans IE6+, FF 3.5+, récents-ish versions d'Opera, Chrome, Safari.
HTML
Créer un div balise comme suit:
<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>
JavsScript
Utilisez le code JavaScript suivant:
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);
}
Explication
L' onpaste événement a l' handlepaste fonction attaché à elle, et passa deux arguments: this (c'est à dire une référence à l'élément que l'événement est attaché) et event qui est l'objet de l'événement.
L' handlepaste fonction de:
La première ligne enregistre simplement le contenu de l'modifiable div à une variable de sorte qu'il peut être restauré à nouveau à la fin.
L' if vérifie si le navigateur est un navigateur webkit (chrome ou safari), et si c'est elle fixe le contenu de l'modifiable div pour les données collées. Ensuite, il annule l'événement pour prévenir webkit-coller quelque chose deux fois. C'est parce que webkit est maladroit, et de ne pas coller quoi que ce soit si vous suffit de décocher la div.
Si ce n'est pas un navigateur webkit puis il efface simplement le modifiable div.
Il appelle ensuite l' waitforpastedata fonction
L' waitforpastedata fonction de:
Cela est nécessaire parce que les données collées n'apparaît pas tout de suite, donc si vous avez juste appelé processpaste tout de suite alors qu'il n'aurait pas toutes les données à traiter.
Ce qu'il fait est de vérifier si le modifiable div a un contenu, si elle ne l'appelle alors processpaste, sinon il définit une minuterie d'appel lui-même et vérifier de nouveau en 20 millisecondes.
L' processpaste fonction de:
Cette fonction enregistré le innerHTML de l'modifiable div (qui est maintenant les données collées) à une variable, restaure le innerHTML de l'modifiable div revenir à sa valeur initiale, et l'alerte les données collées. Évidemment, dans un véritable scénario d'utilisation, vous auriez probablement eu envie d'autre chose que simplement les données d'alerte, vous pouvez faire ce que vous voulez à partir d'ici.
Vous voudrez probablement pour exécuter les données collées à travers un certain type de données, processus de désinfection. Cela peut être fait soit pendant qu'il est encore dans le modifiable div, ou sur l'extrait de la chaîne.
Dans une vraie situation vous auriez probablement souhaitez enregistrer la sélection avant, et de le restaurer par la suite (Définir la position du curseur sur contentEditable <div>). Vous pouvez ensuite insérer les données collées à la position du curseur lors de l'utilisateur a lancé l'action de collage.
P. S. La combinaison de ce code, IE <= 8 et jsfiddle ne semble pas fonctionner, mais il ne fonctionne pas sous ie <= 8 dans un non-jsfiddle de l'environnement.
