javascript événement pâte catch dans textarea

Question

J'ai actuellement un textarea que je demande un contrôle sur le texte qui a été collé dans,

essentiellement je dois être en mesure de prendre tout ce que l'utilisateur veut coller dans une zone de texte et placez-le dans une variable.

Je vais ensuite travailler la position dans laquelle ils coller le texte et la taille de la chaîne pour le retirer de la zone de texte,

Puis à l'accord final avec thats texte est dans la variable dans mon façon.

Ma question: comment pourrais-je obtenir une copie du texte dans une variable qui vient d'être collée par l'utilisateur?

Merci.

Answer 1

j'ai répondu il y a quelques jours une question similaire: Detect pasted text with ctrl+v or right click -> paste. Cette fois, j'ai inclus une fonction assez longue qui obtient avec précision les limites de sélection dans textarea dans IE; le reste est relativement simple.

Vous pouvez utiliser l'événement paste pour détecter le collage dans la plupart des navigateurs (notamment Firefox 2). Lorsque vous gérez l'événement de collage, enregistrez la sélection en cours, puis définissez un temporisateur bref qui appelle une fonction après la fin du collage. Cette fonction peut ensuite comparer les longueurs pour savoir où chercher le contenu collé. Quelque chose comme ce qui suit:

function getSelectionBoundary(el, start) { 
    var property = start ? "selectionStart" : "selectionEnd"; 
    var originalValue, textInputRange, precedingRange, pos, bookmark, isAtEnd; 

    if (typeof el[property] == "number") { 
     return el[property]; 
    } else if (document.selection && document.selection.createRange) { 
     el.focus(); 

     var range = document.selection.createRange(); 
     if (range) { 
      // Collapse the selected range if the selection is not a caret 
      if (document.selection.type == "Text") { 
       range.collapse(!!start); 
      } 

      originalValue = el.value; 
      textInputRange = el.createTextRange(); 
      precedingRange = el.createTextRange(); 
      pos = 0; 

      bookmark = range.getBookmark(); 
      textInputRange.moveToBookmark(bookmark); 

      if (/[\r\n]/.test(originalValue)) { 
       // Trickier case where input value contains line breaks 

       // Test whether the selection range is at the end of the 
       // text input by moving it on by one character and 
       // checking if it's still within the text input. 
       try { 
        range.move("character", 1); 
        isAtEnd = (range.parentElement() != el); 
       } catch (ex) { 
        log.warn("Error moving range", ex); 
        isAtEnd = true; 
       } 
       range.moveToBookmark(bookmark); 

       if (isAtEnd) { 
        pos = originalValue.length; 
       } else { 
        // Insert a character in the text input range and use 
        // that as a marker 
        textInputRange.text = " "; 
        precedingRange.setEndPoint("EndToStart", textInputRange); 
        pos = precedingRange.text.length - 1; 

        // Delete the inserted character 
        textInputRange.moveStart("character", -1); 
        textInputRange.text = ""; 
       } 
      } else { 
       // Easier case where input value contains no line breaks 
       precedingRange.setEndPoint("EndToStart", textInputRange); 
       pos = precedingRange.text.length; 
      } 
      return pos; 
     } 
    } 
    return 0; 
} 

function getTextAreaSelection(textarea) { 
    var start = getSelectionBoundary(textarea, true), 
     end = getSelectionBoundary(textarea, false); 

    return { 
     start: start, 
     end: end, 
     length: end - start, 
     text: textarea.value.slice(start, end) 
    }; 
} 

function detectPaste(textarea, callback) { 
    textarea.onpaste = function() { 
     var sel = getTextAreaSelection(textarea); 
     var initialLength = textarea.value.length; 
     window.setTimeout(function() { 
      var val = textarea.value; 
      var pastedTextLength = val.length - (initialLength - sel.length); 
      var end = sel.start + pastedTextLength; 
      callback({ 
       start: sel.start, 
       end: end, 
       length: pastedTextLength, 
       text: val.slice(sel.start, end), 
       replacedText: sel.text 
      }); 
     }, 1); 
    }; 
} 

window.onload = function() { 
    var textarea = document.getElementById("your_textarea"); 
    detectPaste(textarea, function(pasteInfo) { 
     var val = textarea.value; 

     // Delete the pasted text and restore any previously selected text 
     textarea.value = val.slice(0, pasteInfo.start) + 
      pasteInfo.replacedText + val.slice(pasteInfo.end); 

     alert(pasteInfo.text); 
    }); 
}; 

Answer 2

Une recherche rapide montre qu'il existe différentes méthodes pour différents navigateurs. Je ne suis pas sûr si jQuery a une solution. Prototype.js n'en a apparemment pas. Peut-être que YUI peut le faire pour vous?

Vous pouvez également utiliser TinyMCE, car il possède un nombre de déclencheurs d'événements différents. C'est un traitement de texte à part entière, mais vous pouvez l'utiliser en texte brut si vous le souhaitez. Il pourrait être un peu trop de poids à ajouter cependant. Par exemple, lors de l'initiation, il transforme votre <textarea> en un iFrame avec plusieurs sous. Mais il fera ce que vous demandez.

--Dave

Answer 3

Vous pouvez maintenant utiliser FilteredPaste.js (http://willemmulder.github.com/FilteredPaste.js/) à la place. Il vous permettra de contrôler ce que le contenu est collé dans une zone de texte ou contenteditable et vous serez en mesure de filtrer/modifier/extraire le contenu à volonté.