11548 sujets

JavaScript, DOM et API Web HTML5

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.