Sur un textarea j'ai ajouté des boutons bbcode qui ajoutent du code dans le textarea. Seulement voila, quand du code est ajouté comme ça dans le textarea le scroll du textarea se remet en haut, et donc il faut resdescendre le scroll du textarea, ce qui est embêtant si on a beaucoup de bbcode a mettre dans ce textarea.
J'ai remarqué que sur les formulaires du Site du Zéro cette "erreur" ne se faisait pas, j'ai donc cherché dans les fonctions mais je n'ai pas trouvé...
Je cherche donc une façon pour que le scroll ne redescende pas dès qu'on clique sur un bouton bbcode qui met du bbcode dans le textarea.
voici un extrait d'une fonction que j'utilise, (ce n'est pas de moi )mais cela sert a replacer , rescroller le texte area apres insertion.
grosso modo,
ça prend la hauteur du scroll,
releve la hauteur ou ce trouve le curseur,
puis apres insertion,
ajoute la difference de hauteur de scroll a la valeur de la position du cursor
et redonne le focus au texte area.
// un if, parceque ça sert a rien de lancer ce script si le navigateur n'y comprend rien et puis IE le fait tout seul
var ta = document.getElementById(areaId); ///extrait
if(ta.selectionStart | ta.selectionStart == 0) {
if(ta.selectionEnd > ta.value.length){ ta.selectionEnd = ta.value.length; } // position du scroll var oldPos = ta.scrollTop; var oldHght = ta.scrollHeight; // cette partie du script pour l'insertion des textes var firstPos = ta.selectionStart; var secondPos = ta.selectionEnd+text1.length;
// et le calcul et l'application de la nouvelle bonne postion du scroll ... yeeeees ! var newHght = ta.scrollHeight - oldHght;
ta.scrollTop = oldPos + newHght; //le textarea reprend le focus
ta.focus();
}
Cela marche pour firefoxe, mais je n'ai jamais rien trouve pour opera,
d'autres, vraiment bon et avertis semblent aussi s'y casser les dents ?
// position du scroll var oldPos = ta.scrollTop; var oldHght = ta.scrollHeight; // cette partie du script pour l'insertion des textes var firstPos = ta.selectionStart; var secondPos = ta.selectionEnd+text1.length;
// et le calcul et l'application de la nouvelle bonne postion du scroll ... yeeeees ! var newHght = ta.scrollHeight - oldHght;
ta.scrollTop = oldPos + newHght; //le textarea reprend le focus
ta.focus();
salut,
en fait je ne vois pas trop ce que tu as fait, tu as creer une nouvelle fonction, ok, mais tu l'appelle comment ? , a partir de ton script d'insertion de bbcode en lieu et place de la portion de code pour Firefoxe , ou bien ? ...
<edit> oups, pas bien vu le code du bouton edit, ... il faut que cette fonction soit integré au script principale et pas les lançées en m^me temps </edit>
regarde dans ma signature le lien qui menent vers l'editeur/testeur et fais mumuse avec pour remplir un des texte area jusqu'a ce ça scrolle, et place ton curseur ou tu veut, dans firefoxe, tu garderas le focus sur le cursor et le scroll se repositionneras (dans firefoxe et IE , pas opera .., les autres je sais pas trop, pas tester).
Tu peut reprendre le script entier si tu veux, Remarque que cette "fonction" ne s'applique que dans un navigateur qui comprend "selectionStart" donc firfoxe en l'occurance,
c'est une façon de filtrer les navigateur ... ceci dit revenir apres insertion a l'endroit du cursor ça marche pas dans tout les navigateurs....
(je n'ai pas toucher a ce script ni a la page depuis debut novembre, le truc est en suspend .... le javascript me gave un peu et la page n'est pas tres ergonomique ... tout a refaire , lol)
autrement tu as un lien vers la page, ou un extrait du html concerné et l'ensemble de ton/tes script ?
d'abord, ce n'est pas tout le script que j'ai laisser , mais un extrait, cela me semblait clair pourtant.
Cet extrait de code est la partie qui est comprise par firefoxe . a quelque difference pres (nom des variables , par exemple)l'ensemble de cette partie est similaire a la votre.
Une partie de ce code devait vous semblait familiere (je suis aussi plutot noob en js).
Alors j'essai reprendre plus simplement.
Dans votre script d'insertion de texte il y a une plusieurs conditions testées qui servent a appliquer les commandes "js" comprises par le navigateur qui les lit.
Pour IE , c'est :if (document.selection) { //truc qu' IE va faire } car IE n'a pas besoin du document.getElementById('L'id de la balise'); qui est necssaire a firefoxe (entre autre), pour savoir ou se trouve le texte selectionné ou le curseur.
Cette information est mise en generale dans une "variable"(var) en debut de script auquel on donne un nom court et explicite, pour faciliter la relecture du script et simplifier l'ecriture.
Dans mon bout de code c'etait: var ta=document.getElementById(areaId);
Donc dans la portion de code comprise , par firefoxe ou va retrouver la variable "ta" accollé a selectionStart qui permet grossomodo de retrouver le debut de la portion de texte selectionne(ou juste le positionnement du cursor) dans la page.
Il suffit a partir de la de reperé la partie du script pour firefoxe .
de relevé la hauteur du scroll et sa position avec :
// position du scroll var oldPos = ta.scrollTop; var oldHght = ta.scrollHeight;
en recuperant ces valeur dans 2 variable juste avant l'insertion du texte. (...ta.value...)
la fin du script en generale se termine en redonnant le focus au textarea concerné donc dans l'extrait : ta.focus();
Il suffit alors de replace juste avant ces lignes:
// calcul et application de la nouvelle bonne position du scroll var newHght = ta.scrollHeight - oldHght;
ta.scrollTop = oldPos + newHght;
qui en comparant la hauteur du scroll avant(oldHght) et apres(ta.scrollHeight) l'insertion du texte nous donne une nouvelle valeur (cette valeur peut-etre egale a zero, si la barre de scroll n'est pas devenu necessaire).
Cette valeur ("newHght")va etre ajouter a la valeur de position du scroll avant l'insertion ("oldPos" qui peut-etre zero aussi si il n'y avait pas de scrollbar) .
le resultat de cette operation est donc applique comme ceci :"ta.scrollTop = oldPos + newHght;"
J'espere que cette explication (de debutant aussi ) vas vous permettrent de modifier vos scripts.
Les noms données aux variables sont juste des noms, seuls ils n'ont pas de fonctions.
"ta" est un nom de variable aussi a vous de reprendre celui qui est donné dans votre script, ça ressemble a ça : ta=document.getElementById(areaId);" dans une ligne en debut de votre script ou les caracteres gras ont surement d'autres noms remplacer donc ta par celui de votre script.
Si je parle toujours chinois, montrer votre js pour l'insertion du texte et je vous ajouterai les 4 lignes supplementaires pour firefoxe
Merci beaucoup pour tes explications c'est déjà beaucoup plus clair dans ma tête maintenant
Maintenant j'arrive a faire marcher ça sous IE (pour une fois que qulque chose marche avec IE j'applaudis !!)
Par contre sous Firefox pas moyen !! j'ai essayé plusieurs combinaisins... et toujours rien !!
Au fait je n'ai pas de ligne "var ta=document.getElementById(areaId);"
enfin voici mon code et là où j'ai placé tes bouts de code :
if(isMozilla) { // Si on est sur Mozilla
oField = document.forms['formulaire'].elements['contenu'];
// position du scroll var oldPos = oField.scrollTop; var oldHght = oField.scrollHeight;
devrait servir a repositionner le cursor dans le texte , mais je ne voit pas trop leur interets, essai aussi en les enlevants (sinon, ele devrait se trouver plus haut,avant le recalcul du scroll, le focus est redonné en dernier, ... enfin ça reste ma logique de debutant).
il n'y a pas de raison pour que ce soit impossible a faire .
a plus
Y'aurais pas une fonction pour remettre le scroll en bas directement ?
IE, remet le scroll par defaut ou a etait fait l'insertion,
Opera insere le texte toujours aprés l'ensemble du texte et pas au niveau du curseur et remet le scroll en position haute.
Firefoxe insere le texte a l'endroit voulu et redonne le focus "visuel" en haut.
Pour une fois IE semble avoir le comportement le plus "agreable".
Pourquoi mettre le scroll en bas a la place d'en haut par defaut dans firefoxe ? si je veut ajouter une balise ou un smiley en debut de mon texte, c'est aussi frustrant que de rester scotché en haut , c'est inversé le default.
Ce choix est difficille et on remarque bien souvent que sur des site professionnel et accessible, l'option choisit reste celle de l'insertion des bbcode a la fin du texte et parfois en 2 etapes , un premier click = balise bbcode ouvrante, un 2eme click = balises bbcode fermante.
Pour ton probleme, sans voir le code "js" que tu as deja je ne pourrai pas t'aider plus que ça.
pour la "fonction" et bien je crois que le mieux c'est que tu recherche par toi même comment utiliser :
scrollHeight et scrollTo(x,y) qui peuvent te permettre de recuperer la hauteur du scroll et de te "deplacer", en recuperant la valeur de scrollheight apres insertion, tu peut la reprendre avec scrollto et aller tout en bas .
Je crois que le probleme reste toujours d'inserer ça dans ton script au bon endroit.
a plus
Par ce que tu m'as proposé ou autre chose (j'ai essayé pleins de trucs aussi) et bien je n'ai carrément plus de texte dans mon textarea (en même temps la scrollbar ne revient pas en haut loool !! )
Sinon j'ai essayé en enlevant ce que tu m'as dit mais aucun changement (je me demande d'ailleur si ce bout de code sert a quelque chose !!
quand j'ai lu ta réponse je me suis empressé d'essayer et ca fait 3h que je tourne tout ca dans tous les sens...
Mais si tu ne vois pas ben tant pis je continuerai a remonter ma scrollbarr manuellement ou j'irai taper mon texte sous IE
} else { // Si on est sur IE //mais la tout marche bien alors on passe ! }
J'ai passé les détails sur IE vu que ca marche bien pour IE.
Ensuite voici quel code j'utilise au niveau de mes boutons (on sait jamais ca pourrait venir de là !
Voilà sinon si tu veaux voir ce que ca donne le tout en fonctionnement tu peux aller ici par exemple (mais c'est surtout pour écrire mes news que ce problème m'embête !)
je vais jeter un oeil, mais deja je m'aperçois que dans ta page en lien , ça ne marche pas pour opera, .
Je vais te proposer autre chose et peut-etre un seul script pour les bb code et les smiley en ajoutant une variable, un peu de patience encore :), si j'ai un moment ce soir je m'en occupe
a plus, ..... sinon demain soir .
<edit> voila pour les insertions de bbcode seulement. pour rendre le script compatible avec d'autre navigateur je me suis servis d'un autre script qui verifie les version de navigateur, ça permet d'inserer quand même les balise de bbcode dans opera ... mais a la fin du texte area , et pas de scroll bidule.
1) une page html de base avec le formulaire (extrait de ta page en fait :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="fr"lang="fr"> <head> <title>insertion smiley bbcode et scroll auto </title> <metahttp-equiv="Content-Type"content="text/html; charset=iso-8859-1"/> <linkrel="stylesheet"media="screen"type="text/css"title="Site_j21"href="style/style_1.css"/> <LINKREL="SHORTCUT ICON"href="images/favicon.ico"> <scripttype="text/javascript"language="JavaScript"src="navigateur.js"></script> <scripttype="text/javascript"language="JavaScript"src="insert.js"></script>
// calcul et application de la nouvelle bonne postion du scroll ... yeeeees ! var newHght = ta.scrollHeight - oldHght;
ta.scrollTop = oldPos + newHght;
ta.focus(); } else // on ajoute la balise betement a la fin pour les autres navigateurs sans considerer le scroll, c'est mieux que rien , lol
ta.focus(); if(browser=='Opera'|'inconnu'|'compatible'){ document.forms[0].elements[areaId].value +=text1+text2;} }
Ce second fichiers te sert a inserer le bb code dans ton texte area et remet le scroll a la bonne hauteur aussi dans firefoxe(probablement dans safari aussi ) Ce fichier est un melange de plusieurs bout de scripts que j'ai reussi a faire fonctionner ensembles, un pro aura surement un jolie sourire au dechiffrage, mais bon ça marche ...
et pour appeller ta fonction , il y a un petit changement:
</span>
onClick="insert('contenu','COLOR=red');"
entre les parenthese tu reinseigne 2 variables ('','') , les 2 premieres, c'st l'id du textarea ou tu veut inserer le bbcode ,et la deuxieme paire d'apostrophe apres la virgule c'est pour le bb code que tu veut inserer.
voilou, a toi dee jouer et de t'amuser a modifier cette fonction pour tes smiley, ça va t'aider a comprendre un peu mieux comment ça marche. </edit>
Ca marche nickel !! j'ai juste fait quelques modif pour pas avoir à tout changer, j'ai renommer la fonction et j'ai enlever le paramètre areaid et j'ai mis ca en début de fonction en fait :
function storeCaret(selec) {
var ta = document.getElementById('contenu'); // [...]
Sinon j'suis super content ca marche super bien !!
Bon je mettrais à jour sur le site plus tard car je dois me lever dans exactement 5h30 alors il est temps d'aller au dodo !!
// Anciennes positions var oldPos=textarea.scrollTop; var oldHght=textarea.scrollHeight; // cette partie du script pour l'insertion des textes var firstPos=textarea.selectionStart; var secondPos=textarea.selectionEnd+text1.length;
// et le calcul et l'application de la nouvelle bonne postion du scroll ... yeeeees ! var newHght=textarea.scrollHeight - oldHght;
textarea.scrollTop=oldPos + newHght; //le textarea reprend le focus
textarea.focus();
}
}
Mais ça insère le bbcode sans redescendre le scroll :/
// remise du scroll en bas var newHght=textarea.scrollHeight;
textarea.scrollTop=newHght;
textarea.focus(); } }
Voila, je n'ai pas tester le code, mais comme tu insere tes balise a la fin de ton textearea,
on a aucun interet a connaitre la position initiale, il suffit de recuperer la hauteur apres insertion et de faire scroller d'autant .
En analysant un peut ton code tu aurais fini par comprendre ce qui se passait, chacune des fonctions javascript sont detaillées avec plus ou moins de clareté ici et là sur le web, mais tu peut trouvé des tas d'infos et des exemples applicatifs.
Il faut se mefier d'un script et ne pas faire juste un copier/coller quand on ne comprend pas bien les effets.
// remise du scroll en bas var newHght=textarea.scrollHeight;
textarea.scrollTop=newHght;
textarea.focus(); }else{
document.getElementById(bbcode).value = bbcode; var textarea = document.getElementById(textarea);
textarea.value += '[/' + bbcode + ']';
// remise du scroll en bas var newHght=textarea.scrollHeight;
textarea.scrollTop=newHght;
textarea.focus(); } }
L'id du textarea est bon.
Je ne sais pas de quoi celà peut venir, le code m'a l'air pourtant correct.
Ah si j'viens de trouver une erreure console se rapportant a ce textarea :
Citation : Console Javascript Firefox
Erreur : textarea has no properties
Et quand je clique sur le lien en dessous de l'erreur ça me sélectionne cette ligne javascript :
textarea.value += '[' + bbcode + ']';
Et j'viens de me rendre compte que je dispose d'outil très puissants qui me donne la zone d'erreur mais il me faudrait la liste de ces erreurs et leur cause...
Bon en attendant j'ai trouvé la zone d'erreur sans trouver l'erreur, l'erreur vient de la fonction car ça fait l'erreur console a chaque fois qu'il y'a cette fonction javascript sur un textarea.
heu, de passage furtif, remplace ton var textarea = blabla par un txtarea par exemple (ou autre chose que textarea, que tu utilise deja), car tu assigne une nouvelle valeur a une variable deja passer en "commande" !?. il y a des chances que ça mettent le souk :).
<edit> modifie par exemple:
function nxbbcode(bbcode, textarea){ var textarea = document.getElementById(textarea);
par
function nxbbcode(bbcode, txtrea){ var textarea = document.getElementById(txtrea);
autrement je repasse a la fin de la semaine .... , bon mais bon quand même je suis pas seul a pouvoir t'aider, il y a du monde qui passe sur le forum, ça serait bien de pouvoir passer ce sujet en resolu, non ?
bonne chance manumoumouth !
a plus
et vive les vacances !
Erreur résolu, je tiens a vous remercier énormément pour votre aide !!!
Je vous adore
@+
[js]--> Scroll de textarea
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui
fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui