Discussion :

[boteha]

Bonjour,

J'ai trouvé ce petit script pour compter les caractères dans un textarea et limiter la longueur du texte saisi.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
window.onload = function() {
  setTimeout('timer()', 100);
};
 
function compter(f) {
  var max = 1200;
  var txt = f.com.value;
  var nb = txt.length;
  if (nb > max) {
    alert("Pas plus de " + max + " caractères dans ce champ");
    f.com.value = txt.substring(0, max);
    nb = max;
  }
  f.nbcar.value = nb;
}
 
function timer() {
  compter(document.forms[0]);
  setTimeout("timer()", 100);
}

Cela semble provoquer une alerte unsafe-eval par le CSP (Content Security Policy)/

Où voyez-vous la faille de sécurité ?

Merci d'avance.

[NoSmoking]

Bonjour,
assurément tu n'as pas trouvé ce qui se fait de plus simple et de moins gourmand.

Avec comme HTML :

Code html :

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

<textarea id="commentaire" name="commentaire" value=""></textarea>

une fois le DOM chargé, il te suffit de faire :

Code :

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

1
2
3
4
5
6
7
8
const domElement = document.getElementById("saisie");
const maxCar = 1200;
domElement.addEventListener("keydown", function(e) {
  console.log(this.value.length);
  if (this.value.length > maxCar) {
    // ton code
  }
});

et encore plus simple sans JavaScript :

Code html :

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

<textarea id="commentaire" name="commentaire" value="" maxlength="1200"></textarea>

[javatwister]

Bonjour,

Ton double setTimeout est également très gênant pour le fonctionnement de la page...

[javatwister]

Et si tu veux du temps réel même en cas de copier / couper / coller...

Code html :

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

1
2
<div id="count"></div>
<textarea id="t" rows="10" cols="100" maxlength="1200"></textarea>

Code javascript :

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

document.getElementById("t").addEventListener("input",(e)=> document.getElementById("count").textContent=e.target.value.length)

[boteha]

Bonjour NoSmoking et javatwister,

Merci de votre suivi, je vais faire les tests pendant le week-end.

Je vais commencer par le code de javatwister qui me semble le plus simple.

A voir le comportement du navigateur avec simplement maxlength="1200" quand tu dépasses les 1200 caractères.
Cela bloque la saisie, mais avec ou sans alerte (à mon avis sans) ?
C'est quand même plus sympa d'avoir une alerte, d'où le code de NoSmoking.

Je vous tiens informé.

[javatwister]

Bah, si t'as une alerte qui te casse ta page, ce sera moche...

Tu peux ajouter cette condition:

Code javascript :

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

1
2
3
4
5
6
7
8
const t=document.getElementById("t"),
count=document.getElementById("count");
 
t.addEventListener("input",(e)=> 
	e.target.value.length<e.target.maxLength ? 
	count.textContent=e.target.value.length:
	count.textContent="Limite atteinte!!!"
)