[Javascript] Textarea [Résolu]

TEXTAREA est la Balise qui s'applique plus particulièrement à la création d'une zone de saisie qui se présente comme une petite fenêtre avec la possibilité de visualiser tout le texte que l'on a tapé, et apporte une solution au problème soulevé dans le paragraphe de Maxlength.



- Attribut NAME

il est OBLIGATOIRE et définit le nom de la balise Textarea. <TEXTAREA NAME="catalogue" ........>

- Attributs ROWS et COLS

pour fixerle nombre de lignes et de colonnes qui vont recevoir le texte, avec si ce dernier est plus long que l'espace prévu l'apparition l'apparition automatique de barres de défilement dans les deux sens.

ROWS qui fixe le nombre de lignes qui composent la fenêtre. ROWS=8
COLS qui fixe le nombre de caractères et espaces pouvant netrer dans une ligne. COLS=70

Ces informations combinées avec le script, et tu obtiens ton bonheur.

les attributs rows et cols ne sont la que pour la taille du textarea ils ne limitent rien

ten62 voici une version avec limitation du nombre de caractère par ligne

<script>
	var nbDeLigne_ = 3;
	var nbCharParLigne_ = 5;
	function fnct_textarea(p){
		var nbDeLigne = 1;
		var nbCharLigne = 0;
		var texte = p.value;
		for (var i=0; i<texte.length; i++){
			if (texte.charCodeAt(i)==10) {
				nbDeLigne++;
				nbCharLigne=0;
				if (nbDeLigne>nbDeLigne_) {
					p.value = texte.substring(0,i);
					alert('vous avez dépassé le nombre max de ligne autorisé ('+nbDeLigne_+')');
					break;
				}
			}else{
				nbCharLigne++;
				if (nbCharLigne>nbCharParLigne_) {
					for (var j=i; (j<texte.length)&&(texte.charCodeAt(j)!=10); j++){}
					p.value = texte.substring(0,i) + texte.substring(j);
					alert('vous avez dépassé le nombre max de caractère par ligne autorisé ('+nbCharParLigne_+')');
					break;
				}
			}
		}
	}
</script>
<textarea cols=200 rows=50 onKeyup="fnct_textarea(this)"></textarea>

par contre ya plusieurs trucs sur lesquels j'ai hésité
donc je te le dis ici pour si tu veux que le modifie le script

dans mon exemple j'ai mis le nombre max de lignes a 3
donc si une 4è ligne est ecrite j'en fait quoi ?
-je la supprime (c'est ce que j'ai mis actuelement)
-je la selectionne (pour montrer ou est le problème)

pareil pour le nombre de caractère par ligne
je peux les sélectionner ou les supprimer au choix



edit: tien Sky34gl3 t'as posté pendant que j'écrivais
je vais tester ton code pour voir la différence avec le mien
et par rapport à ce que tu as dit mon code marche autant avec des espaces que des caractères (puisque un espace est un caractère)
edit 2: le problème avec ta version c'est que ça ne compte pas le nombre de caractères par ligne mais le nombre total

Salut,
tu trouveras ton bonheur ici :
http://www.javascriptfr.com/...
Ceci gère le ctrl +v.

Merci mais je veux limiter le nombre de lignes et non le nombre de caractères...

Une idée ?

Bonjour,
Oui mais c'est le script qui me pose problème, je suis débutant en javascripts ...
Personne n'a de script sous la main ?
Merci

LimiterTextArea('commentaire', 10, 'controle_decompte'); 

Tu remplaces le 10 par le nombre de caractères que tu veux mettre.

<textarea id="commentaire" name="commentaire" class="limiter" cols="30"></textarea> 

Tu remplaces 30 par le nombres de caractères que tu veux par lignes. Ainsi si tu mets cols="30" et que tu mets 300 dans LimiterTextArea ça te fera 10 lignes.
Tu vois?

Oui mais avec cette solution on peut faire 300 lignes de 1 caractères aussi ! Je voudrais limiter strictement le nombre de lignes.
Sinon je pourrai peut être contourner le problème en insérant plusieurs input text (1 pour chaque lignes).
Qu'en pensez vous ?

Bon je vais te coder une fonction javascript sur mesure d'ici demain.

Merci ça m'arrange ^^.

nEm3sis et Sky34gl3 , je vous aime ! Merci beaucoup vous me sauvez la vie !

Juste une dernière petite question et je ne vous embêtes plus, est-il possible de limiter en plus le nombre de caractères par lignes ?

J'ai essayé ceci mais sans succès :

<script>
	var nbDeLigne = 3;
	var nbCarLigneMax = 20;

	function fnct_textarea(p){
	var nb = 1;

		for (var i=0; i<p.value.length; i++){
			if (p.value.charCodeAt(i)==10) {
				nb++;
			}
				if (nb>nbDeLigne) {
					alert('Vous avez dépassé le nombre maximum de lignes autorisé ('+nbDeLigne+')')
					p.value = p.value.substring(0,i);
					break;
				}
				var nbligneMax = nb*nbCarLigneMax;
				if (nbligneMax<p.value.length) {
					alert('Vous avez dépassé le nombre maximum de caractères par ligne autorisé ('+nbligneMax+')')
					p.value = p.value.substring(0,i);
					break;
				}
		}
	}
</script>

Merci beaucoup !!!!!

Avec l'attribut cols dans la balise textarea c'est pas ça que tu veux?

Sinon,
le code de n3m3sis ne marche pas si l'utilisateur n'entre que des caractères. Ceci ne marche que si y a des espaces.
J'ai donc corrigé son code :

<script>
	var nbDeLigne = 3;
	var nbcarmax = nbDeLigne*30;
	function fnct_textarea(p){
		var nb = 1;
		var nbcar = 0;
		var s= '';
		for (var i=0; i<p.value.length; i++){
			if (p.value.charCodeAt(i)==10) {
				nb++;
				if (nb>nbDeLigne) {
					alert('vous avez dépassé le nombre max de ligne autorisé ('+nbDeLigne+')')
					p.value = p.value.substring(0,i);
					break;
				}
			}else{
				nbcar++;
				if (nbcar>nbcarmax) {
					alert('vous avez dépassé le nombre de caractere max autorisés ('+nbDeLigne+')')
					p.value = p.value.substring(0,i);
					break;
				}
			}
		}
	}
</script>
<textarea cols=30 rows=20 onKeyUp="fnct_textarea(this)"></textarea>

Ce que j'ai mis en gras est le nombre de caractères par ligne que tu veux. L'attribut rows permet de choisir le nombre de lignes que ton textarea peut supporter. Et tu as juste à changer la valeur de nbDeLigne pour choisir combien de lignes max tu veux.

J'aurais pas du me baser sur IE encore une fois -_-. Et toi ton code tu l'as peut-être pas testé sur IE 7 car pour la première ligne pas de souci. Mais sur la deuxième, après avoir fait Entrée sur la première ligne, tu fais une série de mêmes lettres. Regarde ce que ça te donne.
Je sais bien que la faute est à IE, mais il est trop largement utilisé pour ne pas s'en préoccuper. IE 7 fait des retours à la ligne automatique quand on a fixé l'attribut cols. Ainsi, il faudrait lancer ton script dans le cas de Firefox, et le mien dans le cas d'IE :p.

Bonjour,

Chez moi le script de nEm3sis fonctionne très bien sous FireFox et IE6. Et si IE fait des retours à la ligne automatique, je n'ai qu'a fixer un cols plus grand que le nombre de caractères max par ligne. Je me trompe ?
J'ai remarqué que si l'on revient sur une ligne précédente on peut quand même insérer plus de caractères que la limite, mais il faudrait revoir tout le script je crois donc je m'en contenterez je ne voudrais pas vous prendre trop de temps ^^.

Merci beaucoup vous m'avez sauvé la vie ! ^^

Bonne journée à tous !

C'est surtout n3m3sis qu'il faut remercier, oublie pas de cocher résolu.

Ouep j'ai remarqué ça.
Quant à ton code, félicitations, il est exempt de tout bug. Je vais bientôt me mettre à apprendre le Javascript, car ça me fait défaut ^^.

Génial, merci beaucoup à tous ! Bonne soirée !

Hello super le script vous avez assurez !

J'ai lutter pour trouver une solution j'avais utiliser juste les balises
<textarea name="Description" rows="3" cols="105" </textarea>
Ca ne fonctionner pas c'etais en mode illimiter donc j'ai pas mal de souci de spam :(

Voila je sais que le post de plus de deux ans j'espere avoir un retours de la communauté

donc j'utilise se script pour proposer a des sites de faire leur description sur une page partenaires

je voudrais que leur description soi sur 3 lignes avec 35 caracteres pas lignes
dont un total de 105 caracteres

et sur le bloc de <textarea >
Qui s'affiche sur mon site est aussi le meme format en changeant les donner j'arrive pas a les syncroniser

donc ma balise texte est

<textarea name="Description" rows="3" cols="105" onKeyup="fnct_textarea(this)"></textarea>


Et pour mon script c'est :

<script>
var nbDeLigne_ = 105;
var nbCharParLigne_ = 35;
if(navigator.appName=='Microsoft Internet Explorer') {var sautDeLigne_=13;var decalage_=-1}
else {var sautDeLigne_=10;var decalage_=0}
function fnct_textarea(p){
var nbDeLigne = 3;
var nbCharLigne = 3;
var texte = p.value;
for (var i=0; i<texte.length; i++){
if (texte.charCodeAt(i)==sautDeLigne_) {
nbDeLigne++;
nbCharLigne=decalage_;
if (nbDeLigne>nbDeLigne_) {
p.value = texte.substring(0,i);
alert('vous avez dépassé le nombre maximum de caractère autorisé ('+nbDeLigne_+')');
break;
}
}else{
nbCharLigne++;
if (nbCharLigne>nbCharParLigne_) {
for (var j=i; (j<texte.length)&&(texte.charCodeAt(j)!=10); j++){}
p.value = texte.substring(0,i) + texte.substring(j);
alert('vous avez dépassé le nombre maximum de caractère autorisé ('+nbCharParLigne_+')');
break;
}
}
}
}
</script>


Si quelqu'un peux me donner le script et la balise corriger je vous en remerci par avance