Logo GNT
Actualités Tests & Guides Bons Plans
Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11
Entraide Développement Développement Langage JavaScript Compteur de caractères

Compteur de caractères

40 réponses
Avatar
Pascale
Bonjour à tous,

Je cherche je cherche je cherche encore depuis des semaines et ne trouve
pas.

Avant d'expliquer quoi, je dois dire que le Javacript m'est à peu près
aussi compréhensible que le chinois médiéval ou la physique quantique.

Pour un site dont je m'occupe, j'ai besoin d'un éditeur de texte WYSIWYG
simple et fiable. Après de multiples tests dans tous les sens, j'ai arrêté
mon choix sur l'un des plus simples, qui fait exactement ce que je veux
sans être une usine à gaz : Nicedit.
Seulement voilà, Nicedit n'a pas de compteur de caractères et j'ai beau en
essayer et en réessayer, aucun ne semble vouloir marcher, et j'avoue que ça
me désespère un peu.

Par exemple, le dernier en date que j'ai essayé d'intégrer est celui-ci
(source du compteur de caractères http://pagesperso-
orange.fr/bernard.langellier/info/ltexte3.htm) :

<head>...
<script type = "text/javascript">
function compter(f) {
var max=500;
var txt=f.descrtemp1.value +1;
var nb=txt.length;
var reste=max-nb;
if (nb>max) {
alert("Vous avez dépassé le nombre maximal de caractères qui est de "
+ max +".");
f.descrtemp1.value=txt.substring(0,max);
nb=max;
}
f.nbcar.value=nb;f.restcar.value=reste;
}
</script>
</head>
<body>
<h1>Test d\'éditeur WYSIWYG</h1>
<script type="text/javascript" src="nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
<form name="form1" action="voirtest.php" method="post">
<textarea name="descrtemp1" rows="10" cols="100" width="100%"
onkeypress="compter(this.form)">'.$_SESSION['descrtemp1'].'</textarea>
<p>Nombre de caractères déjà affichés :
<input type="text" name="nbcar" />
<br />Nombre de caractères restants :
<input type="text" name="restcar" />
</p>
<input type="image" name="submit" src="images/visu.gif" align="middle"
alt="Visualiser">
</form>
</body>

Le nombre de caractères déjà affichés et restants est désespérément vide !

Franchement, je ne sais plus quoi faire, j'ai essayé des dizaines de
scripts et aucun ne marche (je suis bien incapable d'en écrire un moi-
même...).

Merci pour votre aide.

--
Pascale
http://www.la-grille-verte.net
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3 4
Avatar
SAM
Le 7/19/09 12:39 PM, Xavier Nayrac a écrit :
SAM a écrit :
Voici qui fonctionne chez moi :
<http://cjoint.com/data/htb705TVrC_nicEdit_cpte_caract.htm>
max : 55 caractères
(ne doit fonctionner que pour 1 seul éditeur)
(le form de l'éditeur doit être nommé 'form1' )

à une erreur près :
ça compte 4 caractères quand c'est vide ! ? !





Le pire:
le "ménage" du contenu du faux textarea doit certainement être prévu
qque part dans le JS de ce nicEdit ... reste à trouver ...

Pour l'heure je me suis contenté de son addEvent()

Il y certainement moyen à moyenner pour trouver le faux textarea
directement par une fonction de ce nicEdit (au lieu de faire une boucle
pour le trouver et le stocker dans une variable globale)


Sinon, pour le "nettoyage", j'imagine qu'Olivier va nous trouver une
RegExp idéale, non?

Là, un mini-test me donne pour une liste en gras (firebug ne le voit
pas, c'est dingue non?) 54 caractères et le code suivant:

"<ol style="font-weight:
bold;"><li>test</li><li>re</li><li><br></li></ol><br> "

et je ne sais ce que foutent ces blancs à la fin.

Une tentative pour effacer ce que j'ai entré c'est soldé par :
"<ol style="font-weight: bold;"><li><br></li><li><br></li></ol>"
et le compteur reste à "dépassé"

Breffle encore du "rich-text" à la mord moi l...
(où est le nouveau paragraphe ?)

Plus je tente de gommer et plus c'est la cagade :-(
"<ol><li><br></li></ol><ol style="font-weight:
bold;"><li><br></li><li><br></li></ol>"
Y a plus de texte mais keskon est envahi de balises !

Suivant ce que veut Pascale
(que les caractères ? ou les balises aussi ?)
(les retours à la ligne comptent?)

Déjà ce serait bien qu'elle nous montre "son" nicEdit
(avec ses options de boutons)
qu'on voye un peu à quoi on se fait manger.


Alley une fois,
avè une t'ite expression (?!s)[^<>]*[^<>s](?=s*<)
ici :
<http://cjoint.com/?htoqxyVc0I>
où :
"<ol><li>test</li><li>re-test</li><li><span style="font-weight:
bold;">re-re-test</span><br></li></ol>"
compte pour 25 caractères, soit :
test
re-test
re-re-test

Ne resterait qu'à éliminer les derniers n et espace
(enfin ... pour ce que je suis parvenu à faire dans cet "éditeur" !)

En ajoutant à ton code une fonction pour supprimer les tags,
trouvée ici : http://www.ozoneasylum.com/5782



Il me semble qu'avec une expression régulière on doit pouvoir y parvenir.
Ci-haut chez cJoint j'en ai utilisée une aimablement prêtée par Oliver
Niakinen pour mon 'tit testeur d'expressions :
<http://stephane.moriaux.pagesperso-orange.fr/truc/js_regexp_testeur.shtml>
- choisir "Contenu balises"
- cliquer [Demo]
- entrer dans le textarea (sans les ") :
"<ol style="font-weight:
bold;"><li>test</li><li>re</li><li><br></li></ol><br> "
- cliquer [Voir]
- Hop! :
test
re

on se rapproche encore. Il reste des problèmes avec les espaces, et
surement d'autres que je n'ai pas vu.



Paske "toi" *tu* y vois qque chose ? ;-)
Moi, j'ai bien du mal.

--
sm
Avatar
SAM
Le 7/19/09 2:35 PM, SAM a écrit :
Le 7/19/09 12:39 PM, Xavier Nayrac a écrit :
SAM a écrit :



Alley une fois,
<http://cjoint.com/?htoqxyVc0I>



Peut-être un chouia mieux comme ça :
<http://cjoint.com/?htpbzQxVdN>
où:
"1234<br>567<br><br>8<br><br><br>"
me compte 10 caractères
pour l'affichage:
"1234
567

8


"

Bon ... il reste encore une erreur JS ...
qui n'a pas l'air de faire planter.

--
sm
Avatar
SAM
Le 7/19/09 10:01 AM, Olivier Miakinen a écrit :
Le 19/07/2009 02:20, SAM a écrit :
Voici qui fonctionne chez moi :
<http://cjoint.com/data/htb705TVrC_nicEdit_cpte_caract.htm>
max : 55 caractères
(ne doit fonctionner que pour 1 seul éditeur)
(le form de l'éditeur doit être nommé 'form1' )

à une erreur près :
ça compte 4 caractères quand c'est vide ! ? !



Le caractère v, le caractère i, le caractère d, le caractère e : le
compte est bon.



trop bon !

Ok, je ->



Non, non, c'était bien vu ;-)
Avatar
SAM
Le 7/19/09 3:02 PM, SAM a écrit :
Le 7/19/09 2:35 PM, SAM a écrit :

Peut-être un chouia mieux comme ça :
<http://cjoint.com/?htpbzQxVdN>

Bon ... il reste encore une erreur JS ...
qui n'a pas l'air de faire planter.



et encore mieux :
<http://cjoint.com/?htrJua3tR0>

devrait ne plus il y avoir l'erreur
et, en cas de dépassement, la mise en forme est respectée
(enfin ... j'asperge)

--
sm
Avatar
Pascale
SAM écrivait
news:4a631320$0$12626$:

Suivant ce que veut Pascale
(que les caractères ? ou les balises aussi ?)
(les retours à la ligne comptent?)



Je souhaite compter les caractères, pas les balises. Que le retour à la
ligne compte ou pas n'a pas une énorme importance.

Déjà ce serait bien qu'elle nous montre "son" nicEdit
(avec ses options de boutons)
qu'on voye un peu à quoi on se fait manger.



Je sais pas ce que j'ai bricolé, mais j'étais arrivée à avoir la liste de
boutons que je voulais, et j'ai dû bêtement casser quelque chose en faisant
mes jolis tests.
http://www.lgv.on-web.fr/valinfotest/testnicedit.php
Ce que je souhaite, par contre, je peux le dire plus facilement :
gras, italique, souligné, couleur et taille de police, justification des
paragraphes (gauche, droit, centré, justifié), listes ordonnées et non
ordonnées, éventuellement indentation.

--
Pascale
http://www.la-grille-verte.net
Avatar
Pascale
Ce que je souhaite, par contre, je peux le dire plus facilement :
gras, italique, souligné, couleur et taille de police, justification des
paragraphes (gauche, droit, centré, justifié), listes ordonnées et non
ordonnées, éventuellement indentation.

Et ajouter un lien, aussi.

--
Pascale
http://www.valinfo.org - Calendrier et annuaire de la vie associative
locale
Avatar
Pascale
Olivier Miakinen <om+ écrivait
news::

Le caractère v, le caractère i, le caractère d, le caractère e : le
compte est bon.

Ok, je ->



Ménon, faut pas (o:

--
Pascale
http://www.la-grille-verte.net
Avatar
Pascale
SAM écrivait
news:4a633dd9$0$23471$:

et encore mieux :
<http://cjoint.com/?htrJua3tR0>

devrait ne plus il y avoir l'erreur
et, en cas de dépassement, la mise en forme est respectée
(enfin ... j'asperge)



Y a un truc bizarre de chez étrange : le comportement du script n'est pas
du tout le même avec FF et Opera (pas testé avec IE). Avec Opera,
comportement nickel, la frappe est bloquée dès que le maxi est atteint. Sur
Firefox, c'est un peu bizarroïde : la frappe n'est pas bloquée, mais
redémarre au début (la fin du texte remplaçant donc le début, mais écrite à
l'envers !) et, si le dernier caractère entré est un espace, il s'affiche &
(peut-être le début de &nbsp;). J'ai vu aussi un comportement très bizarre
toujours avec FF, la touche retour arrière qui affiche une série de </ en
gras : http://i80.servimg.com/u/f80/11/80/63/78/nicedi10.jpg
Dans cet exemple, j'ai tenté d'écrire (sans aucune mise en forme) : Pour un
beau test, c'est un beau test, je ne vous dis que ça. C'est volontairement
trop long, mais on voit bien les </ en gras et « que » écrit au début et à
l'envers.

--
Pascale
http://www.la-grille-verte.net
Avatar
SAM
Le 7/19/09 6:48 PM, Pascale a écrit :
SAM écrivait
news:4a633dd9$0$23471$:

et encore mieux :
<http://cjoint.com/?htrJua3tR0>



Y a un truc bizarre de chez étrange : le comportement du script n'est pas
du tout le même avec FF et Opera (pas testé avec IE). Avec Opera,
comportement nickel, la frappe est bloquée dès que le maxi est atteint. Sur
Firefox, c'est un peu bizarroïde :



Ha ? toi aussi tu as ça ?!
pas trouvé (ni bp cherché) pour replacer le carret à la fin :-(

la frappe n'est pas bloquée, mais
redémarre au début (la fin du texte remplaçant donc le début, mais écrite à
l'envers !) et, si le dernier caractère entré est un espace, il s'affiche &
(peut-être le début de &nbsp;). J'ai vu aussi un comportement très bizarre
toujours avec FF, la touche retour arrière qui affiche une série de </ en



Ha! non! je n'ai pas eu ce bonheur ;-)

gras : http://i80.servimg.com/u/f80/11/80/63/78/nicedi10.jpg
Dans cet exemple, j'ai tenté d'écrire (sans aucune mise en forme) : Pour un
beau test, c'est un beau test, je ne vous dis que ça. C'est volontairement
trop long, mais on voit bien les </ en gras et « que » écrit au début et à
l'envers.




Semblerait kya comme un blème, il ne te reste que moins 30 caractères
c a d que tu en as usé 30 de trop.
Veux-tu bien les rendre ? Je te prie!

Quand je dis que je hais ces éditeurs en ligne,
là j'ai collé :
"Pour un beau test, c'est un beau test, je ne vous dis"
et voilà comment l'éditeur l'édite :
<pre id="line1">Pour un beau test, c'est un beau test, je ne vous dis</pre>

recommencé un peu + proprement et ... oui ça fait comme tu dis
ça ne me l'avait pas fait dans mes essais
Il y a comme un <br> qui se met automatiquement en fin de ligne et qui
souffre de ma tentative de suppression du dernier caractère.

Là, Olivier, il me faudrait une autre RegExp pour supprimer la dernière
balise <br>

Après, pourquoi l'éditeur écrit ça '</' et le passe en gras, Mystère.

--
sm
Avatar
Pascale
SAM écrivait
news:4a636100$0$17777$:

Semblerait kya comme un blème, il ne te reste que moins 30 caractères
c a d que tu en as usé 30 de trop.
Veux-tu bien les rendre ? Je te prie!



Ah non, ça risque pas, je les ai, je les garde ! (-:

Quand je dis que je hais ces éditeurs en ligne,



Moi aussi. Groar. Mais pour ce que je veux faire, je ne sais pas comment
m'en passer. À l'heure actuelle, les utilisateurs peuvent rentrer n'importe
quel gloubiboulga de HTML, c'est pas terrible non plus.

Je suis toujours avec mon minuscule programme :

<?
session_start();
echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head><title>Tests</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
<style type="text/css">
BODY { background: #BBEFFF; color: navy; font-family:
Optimum,Helvetica,Verdana,sans-serif; font-size: medium; width: 80%;
margin: auto; text-align: center;}
</style>
</head>
<body>
<h1>Test d'éditeur WYSIWYG</h1>
<script type="text/javascript" src="nicEdit.js"></script>
<script
type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
<form name="form1" action="voirtest.php" method="post">
<textarea name="descrtemp1" rows="10" cols="100"
width="100%">'.$_SESSION['descrtemp1'].'</textarea>
<textarea name="descrtemp2" rows="10" cols="100"
width="100%">'.$_SESSION['descrtemp2'].'</textarea>
<br>
<input type="image" name="submit" src="images/visu.gif" align="middle"
alt="Visualiser">
</form>
</body>
</html>';
?>

Et je suis même incapable d'utiliser l'option qui me permettrait de choisir
la liste des boutons à afficher.
Théoriquement, tout est expliqué là : http://nicedit.com/demos.php?demo=2

<couine>
Mais avec moi ça marche jamais.
</couine>

là j'ai collé :
"Pour un beau test, c'est un beau test, je ne vous dis"
et voilà comment l'éditeur l'édite :
<pre id="line1">Pour un beau test, c'est un beau test, je ne vous
dis</pre>



<pre> ? Je la connaissaisi pas, celle-ci...

--
Pascale
http://www.la-grille-verte.net
1 2 3 4