Décompte de caractères restant en rouge sur textarea

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:

---

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

Bonjour,

Quelque chose comme ça?

Code:

---

<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>

---

Sauvez vos yeux, externalisez vos scripts :calim2:

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:

---

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

Bonjour,

Citation:

---

Envoyé par SylvainPV

Sauvez vos yeux, externalisez vos scripts :calim2:

---

je plussoies pleinement, ton truc est in-maintenable.

Citation:

---

Envoyé par NoSmoking

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 :aie: 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 :calim2:
Alors j'ai modifié en créant une fonction fonction() pour appeler depuis l'événement onKeyup

Code:

---

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:

---

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? ;)

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:

---

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:

---

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