Empêcher la remontée du scroll

Insertion bbcode

Sujet résolu

14 décembre 2008 à 21:22:30

Bonsoir à tous

,

J'ai créer un système de bbcode pour mon site, et ainsi pouvoir l'intégrer à mes formulaires. Tout marche pour le mieux. J'ai seulement un tout petit problème, quand une scrollbarre est présente dans le textarea et que je descends un peu la scrollbarre, et que j'insère un smiley par exemple, et bien la scroll du textarea remonte... C'est pas très pratique car je dois redescendre à chaque fois.

J'ai fait des recherches, et j'ai remarqué qu'il fallait en fait retenir dans une variable la position de la scrollbarre, et à la fin replacer la scrollbarre comme la position de départ enregistrée.

Ca marche sur IE (pour une fois

), donc je vous donne la partie de mon Javascript sous Mozilla Firefox.

Voici le code actuel... Il doit y avoir une petite erreur mais je ne vois pas où !

function bbcode(codedebut, codefin, champ)
{
var textarea = document.getElementById(champ);
var texta_valu = textarea.value;

//code pour IE qui fonctionne !

else //Si on utilise un navigateur plus récent
{	
	var ff_pos_selection_deb = textarea.selectionStart; //Retourne la position de départ su texte sélectionné
	var ff_pos_selection_fin = textarea.selectionEnd; //Retourne la position de fin du texte sélectionné
	var ff_size_text = textarea.value.length;
	
	var ff_string_deb = texta_valu.substring(0 , ff_pos_selection_deb);
	var ff_selection = texta_valu.substring(ff_pos_selection_deb ,ff_pos_selection_fin);
	var ff_string_fin = texta_valu.substring(ff_pos_selection_fin , ff_size_text);
		
	if (ff_selection.length > 0) //Si on a sélectionné du texte
	textarea.value = ff_string_deb + codedebut + ff_selection + codefin + ff_string_fin;
	else //Si on a rien sélectionné
	textarea.value = ff_string_deb + codedebut + ff_selection + codefin + ff_string_fin;
	var length_focus = ff_string_deb.length + codedebut.length
		
	//Ces trois lignes sont pour repositionner le focus à la suite du bbcode entrez:
	textarea.selectionStart = length_focus;
	textarea.selectionEnd = length_focus;
	textarea.focus();
}//Fin de si on utilise un navigateur type mozilla

Merci d'avance de votre aide

Tillertan

15 décembre 2008 à 10:18:05

Il te suffit avant d'insérer de faire
var maVar = textarea.scrollTop
Puis tu fais tout tes inserts etc.. et:
textarea.scrollTop = maVar

tibeoh

15 décembre 2008 à 20:25:56

Je pensais que cela serait plus dur à résoudre

!!

Merci beaucoup ! En effet ça fonctionne à merveille !
Bonne soirée

Chucky2401

4 mars 2009 à 12:17:14

Bonjour !
désolé de remonter un topic résolu, et qui commence à dater, mais moi en utilisant ceci pour éviter que la scrollbar ne remonte, sa ne m'affiche même plus mon bbcode quand je clique sur un bouton :s.
Besoin d'aide s'il vous plaît.

Salutation !

Golmote

4 mars 2009 à 12:27:40

Montre ton code stp. Parce que là sans rien, c'est pas évident.

Chucky2401

4 mars 2009 à 12:42:23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Rédiger une news</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design par défaut" href="styles/rediger_news.css" />
		
		<script>

                        var scroll = textarea.scrollTop;

			function bbcode(bbdebut, bbfin)
			{
				
				var input = window.document.formulaire.contenu;
				input.focus();
				if(typeof document.selection != 'undefined')
				{
					var range = document.selection.createRange();
					var insText = range.text;
					range.text = bbdebut + insText + bbfin;
					range = document.selection.createRange();
					if (insText.length == 0)
					{
						range.move('character', -bbfin.length);
					}
					else
					{
						range.moveStart('character', bbdebut.length + insText.length + bbfin.length);
					}
					range.select();
				}
				else if(typeof input.selectionStart != 'undefined')
				{
					var start = input.selectionStart;
					var end = input.selectionEnd;
					var insText = input.value.substring(start, end);
					input.value = input.value.substr(0, start) + bbdebut + insText + bbfin + input.value.substr(end);
					var pos;
					if (insText.length == 0)
					{
						pos = start + bbdebut.length;
					}
					else
					{
						pos = start + bbdebut.length + insText.length + bbfin.length;
					}
					input.selectionStart = pos;
					input.selectionEnd = pos;
				}
			 
				else
				{
					var pos;
					var re = new RegExp('^[0-9]{0,3}$');
					while(!re.test(pos))
					{
						pos = prompt("insertion (0.." + input.value.length + "):", "0");
					}
					if(pos > input.value.length)
					{
						pos = input.value.length;
					}
					var insText = prompt("Veuillez taper le texte");
					input.value = input.value.substr(0, pos) + bbdebut + insText + bbfin + input.value.substr(pos);
				}
                           textarea.scrollTop = scroll;

				
			}
			function smilies(img)
			{
				window.document.formulaire.contenu.value += '' + img + '';
			}
		</script>
		
    </head>
    
    <body>
<h3><a href="liste_news.php">Retour à la liste des news</a></h3>
<?php

include('includes/mbdd.php');

mysql_connect($ABDD, $LOG, $MDP);
mysql_select_db($DB);
if (isset($_GET['modifier_news'])) // Si on demande de modifier une news
{
    // On protège la variable "modifier_news" pour éviter une faille SQL
    $_GET['modifier_news'] = mysql_real_escape_string(htmlspecialchars($_GET['modifier_news']));
    // On récupère les infos de la news correspondante
    $retour = mysql_query('SELECT * FROM news WHERE ID=\'' . $_GET['modifier_news'] . '\'');
    $donnees = mysql_fetch_array($retour);
    
    // On place le titre et le contenu dans des variables simples
    $titre = stripslashes($donnees['titre']);
    $contenu = stripslashes($donnees['contenu']);
    $id_news = $donnees['ID']; // Cette variable va servir pour se souvenir que c'est une modification
	$timestamp_edit = time();
}
else // C'est qu'on rédige une nouvelle news
{
    // Les variables $titre et $contenu sont vides, puisque c'est une nouvelle news
    $titre = '';
    $contenu = '';
    $id_news = 0; // La variable vaut 0, donc on se souviendra que ce n'est pas une modification
}
?>

	<?php include("menu_admin.php"); ?>

<form action="liste_news.php" method="post" name="formulaire">

<fieldset><legend>Mise en forme</legend>
					<input type="button" id="gras" name="gras" value="Gras" onClick="javascript:bbcode('[g]', '[/g]');return(false)" />
					<input type="button" id="italic" name="italic" value="Italic" onClick="javascript:bbcode('[i]', '[/i]');return(false)" />
					<input type="button" id="souligné" name="souligné" value="Souligné" onClick="javascript:bbcode('[s]', '[/s]');return(false)" />
					<input type="button" id="lien" name="lien" value="Lien" onClick="javascript:bbcode('[url]', '[/url]');return(false)" />
					<br /><br />
					<img src="Images/smileys/heureux.png" title="heureux" alt="heureux" onClick="javascript:smilies('  ');return(false)" />
					<img src="Images/smileys/lol.png" title="lol" alt="lol" onClick="javascript:smilies('  ');return(false)" />
					<img src="Images/smileys/triste.png" title="triste" alt="triste" onClick="javascript:smilies(' :triste: ');return(false)" />
					<img src="Images/smileys/cool.png" title="cool" alt="cool" onClick="javascript:smilies(' :frime: ');return(false)" />
					<img src="Images/smileys/rire.gif" title="rire" alt="rire" onClick="javascript:smilies(' XD ');return(false)" />
					<img src="Images/smileys/confus.gif" title="confus" alt="confus" onClick="javascript:smilies(' :s ');return(false)" />
					<img src="Images/smileys/choque.png" title="choc" alt="choc" onClick="javascript:smilies('  ');return(false)" />
					<img src="Images/smileys/question.gif" title="?" alt="?" onClick="javascript:smilies(' :interrogation: ');return(false)" />
					<img src="Images/smileys/exclamation.gif" title="!" alt="!" onClick="javascript:smilies(' :exclamation: ');return(false)" />
					</fieldset>

<p><label for="titre">Titre : </label><input type="text" size="50" name="titre" id="titre" value="<?php echo $titre; ?>" /></p>
<p>
    <label for="text">Contenu :</label><br />
    <textarea name="contenu" cols="60" rows="10" id="text"><?php echo $contenu; ?></textarea>
	<br />
    
    <input type="hidden" name="id_news" value="<?php echo $id_news; ?>" />
	<?php
		if (isset($timestamp_edit))
		{
		?>
	<input type="hidden" name="timestamp_edit" value="<?php echo $timestamp_edit; ?>" />
		<?php
		}
		?>
    <input type="submit" value="Envoyer" id="envoie"/>
</p>
</form>
</body>
</html>

Golmote

4 mars 2009 à 14:12:09

Code HTML généré plutôt stp

(Le PHP n'est d'aucune aide dans les problèmes de JS)

Chucky2401

4 mars 2009 à 14:19:43

Désolé

!
Le voici :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Rédiger une news</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" media="screen" type="text/css" title="Design par défaut" href="styles/rediger_news.css" />
		
		<script>
			function bbcode(bbdebut, bbfin)
			{

                               var scroll = textarea.scrollTop;

				var input = window.document.formulaire.contenu;
				input.focus();
				if(typeof document.selection != 'undefined')
				{
					var range = document.selection.createRange();
					var insText = range.text;
					range.text = bbdebut + insText + bbfin;
					range = document.selection.createRange();
					if (insText.length == 0)
					{
						range.move('character', -bbfin.length);
					}
					else
					{
						range.moveStart('character', bbdebut.length + insText.length + bbfin.length);
					}
					range.select();
				}
				else if(typeof input.selectionStart != 'undefined')
				{
					var start = input.selectionStart;
					var end = input.selectionEnd;
					var insText = input.value.substring(start, end);
					input.value = input.value.substr(0, start) + bbdebut + insText + bbfin + input.value.substr(end);
					var pos;
					if (insText.length == 0)
					{
						pos = start + bbdebut.length;
					}
					else
					{
						pos = start + bbdebut.length + insText.length + bbfin.length;
					}
					input.selectionStart = pos;
					input.selectionEnd = pos;
				}
			 
				else
				{
					var pos;
					var re = new RegExp('^[0-9]{0,3}$');
					while(!re.test(pos))
					{
						pos = prompt("insertion (0.." + input.value.length + "):", "0");
					}
					if(pos > input.value.length)
					{
						pos = input.value.length;
					}
					var insText = prompt("Veuillez taper le texte");
					input.value = input.value.substr(0, pos) + bbdebut + insText + bbfin + input.value.substr(pos);
				}

                              textarea.scrollTop = scroll;
			}
			function smilies(img)
			{
				window.document.formulaire.contenu.value += '' + img + '';
			}
		</script>
		
    </head>
    
    <body>

<h3><a href="liste_news.php">Retour à la liste des news</a></h3>

			<ul id="menu">
			<li id="nom">MENU</li><br />
			<li><a href="index.php">Accueil Admin</a></li>
			<li><a href="../accueil.php">Accueil Site</a></li>
			<hr />
			<li><a href="liste_news.php">Liste des news</a></li>

			<li><a href="rediger_news.php">Rediger une new</a></li>
			<hr />
			<li><a href="messages_contact.php">Messages Visiteurs</a></li>
			<li><a href="messages_livreor.php">Messages Livre D'Or</a></li>
			<li><a href="messages_minichat.php">Messages Minichat</a></li>
			<hr />
			<li><a href="liens_connaissance.php">Liens Ami(e)s/Familles</a></li>

			<hr />
			<li><a href="liste_membres.php">Liste des membres</a></li>
			<hr />
			<li><a href="forums.php">Gérer le forum</a></li>
			<hr />
			<li><a href="http://www.skyrock/m/blog/">Sky Admin</a></li>
			<li><a href="/Dotclear/admin">Dotclear Admin</a></li>

		</ul>



<form action="liste_news.php" method="post" name="formulaire">

<fieldset><legend>Mise en forme</legend>
					<input type="button" id="gras" name="gras" value="Gras" onClick="javascript:bbcode('[g]', '[/g]');return(false)" />
					<input type="button" id="italic" name="italic" value="Italic" onClick="javascript:bbcode('[i]', '[/i]');return(false)" />
					<input type="button" id="souligné" name="souligné" value="Souligné" onClick="javascript:bbcode('[s]', '[/s]');return(false)" />
					<input type="button" id="lien" name="lien" value="Lien" onClick="javascript:bbcode('[url]', '[/url]');return(false)" />

					<br /><br />
					<img src="Images/smileys/heureux.png" title="heureux" alt="heureux" onClick="javascript:smilies('  ');return(false)" />
					<img src="Images/smileys/lol.png" title="lol" alt="lol" onClick="javascript:smilies('  ');return(false)" />
					<img src="Images/smileys/triste.png" title="triste" alt="triste" onClick="javascript:smilies(' :triste: ');return(false)" />
					<img src="Images/smileys/cool.png" title="cool" alt="cool" onClick="javascript:smilies(' :frime: ');return(false)" />
					<img src="Images/smileys/rire.gif" title="rire" alt="rire" onClick="javascript:smilies(' XD ');return(false)" />
					<img src="Images/smileys/confus.gif" title="confus" alt="confus" onClick="javascript:smilies(' :s ');return(false)" />
					<img src="Images/smileys/choque.png" title="choc" alt="choc" onClick="javascript:smilies('  ');return(false)" />
					<img src="Images/smileys/question.gif" title="?" alt="?" onClick="javascript:smilies(' :interrogation: ');return(false)" />

					<img src="Images/smileys/exclamation.gif" title="!" alt="!" onClick="javascript:smilies(' :exclamation: ');return(false)" />
					</fieldset>

<p><label for="titre">Titre : </label><input type="text" size="50" name="titre" id="titre" value="" /></p>
<p>
    <label for="text">Contenu :</label><br />
    <textarea name="contenu" cols="60" rows="10" id="text"></textarea>
	<br />
    
    <input type="hidden" name="id_news" value="0" />

	    <input type="submit" value="Envoyer" id="envoie"/>
</p>
</form>
</body>
</html>

Golmote

4 mars 2009 à 15:24:24

Je vois pas quel est le scroll qui est censé posé problème...

Tu testes sous FF ou IE ?

Chucky2401

4 mars 2009 à 17:10:16

Le scroll qui pose problèmes c'est ce le dernier, celui qui a l'id text.
Je teste sous FireFox.
Mais quand je mets les lignes qui sont censé remettre le scroll à la bonne position, sa n'affiche même pas le bbcode souhaiter, si je l'ai met pas, sa fonctionne normalement, mais le scroll remonte.