Récupération d'un texte en le selectionnant...

Bonjour à tous !!!!
Après de longues recherches, je remets mon problème entre vos mains expertes
Je m'explique : dans une page html, un petit bout de code.*

<p>Mon texte</p>
<input id="test" type="button" value="test" />

Rien de bien folichon ^^ Cependant, ce que j'aimerai faire, c'est lors de la sélection du texte avec mon curseur (comme si je voulais le copier), en appuyant sur mon bouton, un alert s'affiche avec le texte sélectionné. J'aimerai bien passé par jQuery (pour l'évenement click() mais ce n'est pas obligatoire)...

voila un screenshot de ce que je voudrai (la fonction est truké bien evidemment ^^)


Merci d'avance à ceux qui auront la gentillesse de m'aider
Modifié par zrai (29 Jan 2010 - 15:53)

pfffff... c'était trop facile, j'ai honte

Merci beaucoup rs459 !!!

Le problème est donc [résolu] ?

mhhhh...
Je rajoute une difficulté en plus
Je pensais que la solution servirait à mon problème mais pas du tout !!!
Je m'explique : je suis dans Joomla, au niveau de l'édition d'un article. J'ai rajouté un bouton en bas de la page au niveau des boutons "images,...".
Ce bouton ouvre un pop-up (identique à celui de "images") et affiche le contenu d'une page php.
Mon objectif : récupérer le texte sélectionné par l'utilisateur et l'envoyer à ma page php.
Je pensais que je pouvais le faire avec la fonction getSelection, mais malheureusement, sa ne marche pas...
Je remets donc à nouveau mon problème entre vos mains

C'est normal ,je pense que lorsque tu cliques sur le bouton, tu perds la selection, donc il faut passer par une variable qui stocke le getSelection , donc à l'arrache ca donne ca.

<script type="text/javascript">					
		$(document).ready(function(){
			function getSelection() {
	return (!!document.getSelection) ? document.getSelection() :
	       (!!window.getSelection)   ? window.getSelection() :
	       document.selection.createRange().text;
};
			var TextToPhp = 0;
		$("p.asurveiller").mouseup(function(){
	  TextToPhp = getSelection();
    });	
	
		$("a.TransmitSelection").click(function(){
			if (TextToPhp.length > 0) {
				alert(TextToPhp);
				this.href = "page.php?value=" + TextToPhp ;
				TextToPhp = 0;
			}
			else {
				alert("veuillez selectionner du texte");
				return false;
			};
		});
		
	   	
});

<p>
    			"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			</p>
			<p class="asurveiller">
				"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
			</p>
			
			<a href="#" class="TransmitSelection">Envoyer la selection</a>

EDIT: C'est vraiment une solution à l'arrache, parce que si mes souvenirs sont bons , le nombre de caractere en GET est limité, donc la solution propre serait de créer un formulaire lié à ton bouton, que tu passerais en POST. genre un textarea caché (display :none) auquel tu donnerais la valeur du GetSelection() soit TextToPhp $("#idtextarea").value(TextToPhp), enfin je te laisse voir ca, c'était juste un moyen de te faire voir que c'est possible à faire.
Modifié par rs459 (29 Jan 2010 - 19:14)

Alors, j'ai bien testé ta réponse. Elle marche mais pas dans mon cas. A mon avis, je ne suis pas loin.
Mon problème se trouve au niveau de "onmouseup" : p est vide au chargement de la page (message d'erreur de firebug : p is null). Comme il y a un éditeur de texte (tiny), les balises <p> se forment au fur et à mesure que l'utilisateur tape du texte. La classe "asurveiller" ne peut donc pas être insérer dans le code....

J'essaie de reprendre ta méthode mais sans jQuery....

Dans ce cas , si tes éléments apparaissent après le chargement de la page tu dois utiliser .live() http://api.jquery.com/live/

$("p.asurveiller").live( "mouseup" , function(){ 
      TextToPhp = getSelection(); 
    }); 

bien tu peux utiliser autre chose que p.asurveiller, par exemple , #tinydiv > p pour tous les paragraphes fils de l'id #tinydiv