Discussion :

[Zalawy]

Bonjour,
Je ne sais pas que je poste au bon endroit mais je vous explique mon problème. Je veux afficher le décompteur de caractères sur textarea en javascript,tout va bien jusqu'à quand je veux afficher le nombre de caractères restant en rouge. Par exemple,j'ai pris 350 caractères comme le nombre de caractère maximal ensuite quand je tape un message,le nombre de caractère est inférieur de 20 et la couleur de caractère soit en rouge comme Twitter. J'ai consulté sur le site à ce sujet mais le résultat donne toujours comment faire le compteur de caractère,pas avec la couleur et aussi qu'il faut faire avec la librairie jQuery,ça je ne veux pas faire. Est ce que c'est possible de le faire sans jQuery?

Voici un bout de code que j'ai fait en javascript sur textarea :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p>Encore <strong id="reception_num_carac">350</strong> caractères</p>
<textarea name='description' cols='55' rows='8' onkeyup="if(this.value.length > 350) this.value = this.value.substring(0, 350); document.getElementById('reception_num_carac').innerHTML = 350 - this.value.length;" ></textarea>

J'espère que mes explications sont bonnes
Merci

[saymoneu]

Bonjour,

Quelque chose comme ça?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<textarea name='description' cols='55' rows='8' onkeyup="if(this.value.length > 350) this.value = this.value.substring(0, 350); if(this.value.length < 20){this.style.color='red';}else{this.style.color='black';}document.getElementById('reception_num_carac').innerHTML = 350 - this.value.length;" ></textarea>

[SylvainPV]

Sauvez vos yeux, externalisez vos scripts

[Zalawy]

Bonjour

Merci pour vos réponses
@saymenou : c'est bien ça et je l'ai modifié un peu car le code que tu m'as indiqué,c'est les 20 chaines caractères en rouge au début du message,pas le décompteur restant.
Voici ce bout de code javascript si ça peut intéresser quelqu'un.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<p>Encore <strong id="reception_num_carac">350</strong> caractères</p>
<textarea name='description' cols='55' rows='8' onkeyup="if(this.value.length > 350) this.value = this.value.substring(0, 350); 
if(this.value.length < 330){this.style.color='black'; document.getElementById('reception_num_carac').style.color = 'black';}
else{this.style.color='red'; document.getElementById('reception_num_carac').style.color = 'red';}
document.getElementById('reception_num_carac').innerHTML = 350 - this.value.length;" >
</textarea>

ça a marché pour le décompteur de caractère et j'ai ajouté aussi la couleur pour le chiffre,tout a bien marché. Merci pour tout
Je close le post

[NoSmoking]

Bonjour,

Sauvez vos yeux, externalisez vos scripts

je plussoies pleinement, ton truc est in-maintenable.

[Zalawy]

Bonjour,je plussoies pleinement, ton truc est in-maintenable.

Oui,j'ai consulté le site comment je débute en javascript dans la balise textarea : http://g-rossolini.developpez.com/tu...javascript#LIV
En effet,en voyant l'introduction,ce que j'utilise javascript dans la balise n'est pas proprement écrit,ni lire. Je comprends mieux pourquoi mes codes vous piquent des yeux mais malheureusement,j'ai vu des forums ou il y a des membres qui ont posté ce code et c'est pour ça que j'ai utilisé ce code moins propre
Alors j'ai modifié en créant une fonction fonction() pour appeler depuis l'événement onKeyup

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function fonction(textarea){
	if(textarea.value.length > 350){
		textarea.value = textarea.value.substring(0, 350); 
	}
	if(textarea.value.length < 340){
		document.getElementById('reception_num_carac').style.color = 'black';
		}else{
			document.getElementById('reception_num_carac').style.color = 'red';
		}
	document.getElementById('reception_num_carac').innerHTML = 350 - textarea.value.length;	
}

Et appeler la fonction sur textarea :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<p>Encore <strong id="reception_num_carac">350</strong> caractères</p>
<textarea name='description' cols='55' rows='8'  onkeyup="fonction(this)" ></textarea>

C'est mieux?

[SylvainPV]

C'est déjà bien mieux

Tu peux aller plus loin cependant :
- te servir de l'attribut maxlength des textarea pour ton calcul
- déclarer ton script dans un fichier.js séparé de ton HTML
- donner un nom explicite à ta fonction
- passer l'élément reception_num_carac comme paramètre de fonction pour pouvoir la porter plus facilement ailleurs

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<script src="js/tonfichier.js"></script>
 
<p>Encore <strong id="reception_num_carac">350</strong> caractères</p>
<textarea class="charcounter" maxlength="350" name='description' cols='55' rows='8' onkeyup="updateCharCounter(this, '#reception_num_carac')" ></textarea>

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
function updateCharCounter(textarea, counterElementSelector){
  var numberOfLineBreaks = (textarea.value.match(/\n/g)||[]).length;
  var characterCount = textarea.value.length + numberOfLineBreaks;
  var restants = +(textarea.getAttribute("maxlength"))-characterCount;
  var counterElement = document.querySelector(counterElementSelector);
  if(counterElement != null){
     counterElement.style.color = (restants <= 10 ? "red" : "black");
     counterElement.textContent = restants;
  }
}

http://jsfiddle.net/6qfAm/

Au passage j'ai corrigé un bug potentiel, les retours à la ligne n'étaient pas comptés dans les caractères