11548 sujets

JavaScript, DOM et API Web HTML5

Ajax : Charger après copier coller

Bonjour à tous,

J'ai une fonction ci-dessous qui charge le résultat quand j'écris dans l'input.
Sauf qu'au copier coller, cela ne marche pas, je ne suis obliger de faire un espace pour charger.

Y a t-il un moyen de faire cela ?

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script>
$(document).ready( function() {
  // détection de la saisie dans le champ de recherche
  $('#post_url').keyup( function(){
    $field = $(this);
    $('#results').html(''); // on vide les resultats
    $('#ajax-loader').remove(); // on retire le loader
 
    // on commence à traiter à partir du 2ème caractère saisie
    if( $field.val().length > 1 )
    {
      // on envoie la valeur recherché en GET au fichier de traitement
      $.ajax({
  	type : 'POST', // envoi des données en GET ou POST
	url : 'form.php' , // url du fichier de traitement
	data : 'post_url='+$(this).val() , // données à envoyer en  GET ou POST
	beforeSend : function() { // traitements JS à faire AVANT l'envoi
		$field.after('<img src="ajax-loader-2.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
	},
	success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
		$('#ajax-loader').remove(); // on enleve le loader
		$('#results').html(data); // affichage des résultats dans le bloc
	}
      });
    }		
  });
});
</script>


<!--debut du formulaire-->

<!--fin du formulaire-->
 
<!--preparation de l'affichage des resultats-->
<div id="results"><form class="ajax" action="" placeholder="Paste the url from Youtube, Vimeo, Dailymotion, Instagram..." method="post">
		<input type="text" size="80px" name="post_url" id="post_url" />
</form></div>


Merci !
Bon alors en fait, j'ai ceci comme ça, le input se charge au copier-coller donc pas de problème. Par contre je souhaite également charger le input avec un boutton (en plus du chargement automatique)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

<script type="text/javascript">
$(document).ready( function() {
  // détection de la saisie dans le champ de recherche
  $('#post_url').keyup( function(){
    $field = $(this);
    $('#results').html(''); // on vide les resultats
    $('#ajax-loader').remove(); // on retire le loader
	
    // on commence à traiter à partir du 2ème caractère saisie
    if( $field.val().length > 1 )
    {
      // on envoie la valeur recherché en GET au fichier de traitement
      $.ajax({
  	type : 'POST', // envoi des données en GET ou POST
	url : 'form.php' , // url du fichier de traitement
	data : 'post_url='+$(this).val() , // données à envoyer en  GET ou POST
	beforeSend : function() { // traitements JS à faire AVANT l'envoi des 
		$field.after('<img src="ajax-loader-2.gif" alt="loader" id="ajax-loader" />'); // ajout d'un loader pour signifier l'action
	},
	success : function(data){ // traitements JS à faire APRES le retour d'ajax-search.php
		$('#ajax-loader').remove(); // on enleve le loader
		$('#results').html(data); // affichage des résultats dans le bloc
	}
      });
    }		
  });
});
</script>



		
		<!--debut du formulaire-->
		<form class="ajax" method="post">
			<p>
				<input type="text" name="post_url" id="post_url" />
			</p>
		</form>
		<!--fin du formulaire-->
		
		<!--affichage des resultats-->
		<div id="results"></div>
Tu peux écouter l'évènement "past" qui sera déclenché lors d'un copier collé dans ton input.
$('#post_url').bind('paste', function(){
    setTimeout(doSometing, 5);
});


Petite astuce basé sur mon expérience, je te conseil d'ajouter un petit délais, style 5ms, pour le temps d'exécution du collé qui peut parfois induire une légère latence.
Sujet clos
Aller à