Limiter la saisie en fonction de la taille d'un textarea

[renaud26]

Bonjour, je cherche une soluce pour limiter la saisie d'un textarea, non pas au nombre de caractères, mais à la taille du textarea.
Je veux dire par là : quand le user arrive au bout du champ, on n'ajoute pas de scroll, on bloque la saisie.

Possible ?

[Willpower]

possible : oui (même facile)

Code :

1
2
3
4
5
6
7
8
<script type="text/javascript">
function removeOnScroll(){
	while(this.scrollHeight-this.clientHeight){
		this.value = this.value.substring(0,this.value.length-1);
	}
}
</script>
<textarea onscroll="removeOnScroll.call(this);"  style="overflow:hidden;" >hello world from willpower</textarea>

edit: en fait, ça ne bloque pas la longueur, mais ça supprime tous les caractères un par un tant qu'il y a du scroll.

[renaud26]

Bonjour et merci pour ta réponse.

Cependant, cela n'a pas l'air de fonctionner. Le overflow hidden fait que l'on ne voit plus ce qui est saisi au-delà des limites du textarea, mais si on regarde la BDD, il y a bel et bien des caractères enregistrés...

[Willpower]

Envoyé par renaud26

Bonjour et merci pour ta réponse.

Cependant, cela n'a pas l'air de fonctionner. Le overflow hidden fait que l'on ne voit plus ce qui est saisi au-delà des limites du textarea, mais si on regarde la BDD, il y a bel et bien des caractères enregistrés...

Je n'avais pas testé sous firefox, enleve simplement le style overflow.

[Bovino]

Je vois pas trop l'intérêt puisqu'il est possible, sur quasiment tous les navigateurs, de modifier la taille du textarea

[renaud26]

Salut Bovino... là tu marques un point ! C'est donc impossible ? Mon textarea fait un certain nombre de lignes et je veux justement qu'il ne soit pas dépassé...
Il n'y a donc pas d'équivalent de maxlength pour les textareas ?

[Willpower]

En CSS:

Code css :

resize:none;

fonctionne sur : opéra,safari,chrome,firefox,explorer, ...


sinon il n'existe pas de maxlength, mais tu peux le limiter le nombre de caractère comme l'explique le début du sujet et faire un substring(maxlength) sur le this.value lors des keypress.

ou tu peux limiter la taille du textarea et empecher des débordement en supprimant les caractères un à un lors d'un scroll.
(si les caractères étaients ajoutés par paquets conséquentes(des milliers) systèmatiquement(comme des copier/coller) je t'aurai proposé une suppression dichotomique.)

[renaud26]

Bonsoir,

Ouais c'est pas simple...
Là, le resize:none fonctionne.
J'ai laissé ta fonction, mais lorsqu'on arrive au bout, le scroll apparait fugitivement et disparait, mais on continue à écrire quand même...

Je vais devoir passer par une limitation du nombre de caractères...

[Willpower]

Envoyé par renaud26

J'ai laissé ta fonction, mais lorsqu'on arrive au bout, le scroll apparait fugitivement et disparait, mais on continue à écrire quand même...

ça écrit et puis ça efface, si le navigateur était bien concu et l'ordinateur assez puissant, ça devrait être tellement instantané (en tout cas pour la frappe qui ajoute les caractères un à un) que ça devrait être inaperçu. et donc revenir à un blocage de frappe.


pour tester que le champ n'accepte pas plus de caractère (donc lors d'un submit), tu le vois directement dans l'url avec ce simple code.

Code html :

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function removeOnScroll(){
	while(this.scrollHeight-this.clientHeight){
		this.value = this.value.substring(0,this.value.length-1);
	}
}
</script>
<form>
	<textarea name="textarea "onscroll="removeOnScroll.call(this);"  style="overflow:hidden;resize:none;" >hello world from willpower</textarea>
	<input type="submit" />
</form>