Catch collé entrée dans textarea

Question

avec javascript (Jquery).

Recherché en ligne, il semble que ce ne soit pas possible. Jusqu'à présent, j'ai quelque chose comme:

$("#textAreaId").bind('paste', function (e) { 
     alert('pasting text!!!!'); 

     var data = $("#taData").val(); 

     alert(data); 



    }); 

mais les données est vide à ce stade ... est-il un moyen de capturer l'entrée collée après qu'il a été collé? On dirait qu'il devrait y avoir un moyen.

L'événement de clé dans Jquery n'est pas déclenché lors du collage.

Des idées?

Answer 1

Voici ce que j'ai décidé de le faire. S'il vous plaît noter que je suis simplement nécessaire pour récupérer le contenu collé.

$(document).ready(function() {   

    $("#taData").bind('paste', function (e) { 
     setTimeout(function() { DisplayPastedData(); }, 100); 
    });  

}); 



function DisplayPastedData() { 

    var data = $("#taData").val(); 
    alert('input pasted ' + data); 


} 

J'ai choisi arbitrairement 100 millisecondes d'attente, ce qui fonctionne très bien avec mon maximum de données collées.

Answer 2

Tous les navigateurs ne prennent pas en charge les mêmes fonctions de copier/coller. Voici un tableau dont visionneur qui fonctionne:

http://www.quirksmode.org/dom/events/cutcopypaste.html

Si le navigateur prend en charge la capture des événements copier/coller, jQuery devrait fonctionner correctement. Je suggère de tester chacun de vos navigateurs ciblés.

Une autre approche consisterait à utiliser la propriété jQuery 'data' pour détecter que le champ de saisie a changé. Voici un article avec le code exemple:

http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-changes/

de l'article:

var formChanged = false; 

$(document).ready(function() { 
    $('#my_form input[type=text].editable, #my_form textarea.editable').each(function (i) { 
      $(this).data('initial_value', $(this).val()); 
    }); 

    $('#my_form input[type=text].editable, #my_form textarea.editable').keyup(function() { 
      if ($(this).val() != $(this).data('initial_value')) { 
       handleFormChanged(); 
      } 
    }); 

    $('#my_form .editable').bind('change paste', function() { 
      handleFormChanged(); 
    }); 

    $('.navigation_link').bind("click", function() { 
      return confirmNavigation(); 
    }); 
}); 

function handleFormChanged() { 
    $('#save_or_update').attr("disabled", false); 
    formChanged = true; 
} 

function confirmNavigation() { 
    if (formChanged) { 
      return confirm('Are you sure? Your changes will be lost!'); 
    } else { 
      return true; 
    } 
} 

Answer 3

Tout à fait un ancien thread, mais 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é.