Rechercher : dans
Par :

[Javascript] Textarea

Dernière réponse le 6 aoû 2008 à 22:20:17 ten62, le 30 jui 2008 à 20:22:22 
 Signaler ce message aux modérateurs

Bonjour,

J'aimerai savoir comment limiter le nombre de lignes dans un textarea ?

Merci beaucoup !!!

Configuration: Windows XP
Firefox 2.0.0.16

Meilleures réponses pour « [Javascript] Textarea » dans :
Javascript - Manipulation des contrôles clavier VoirManipulation des contrôles clavier Cette astuce a pour but de vous faire découvrir la (ou du moins une) manière de contrôler les évènements clavier en javascript. Cela vous permettra de contrôler/attribuer les/des comportements particuliers à...
Javascript - Modifier la hauteur (height) d'un élément HTML VoirPour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Popup en CSS, sans Javascript VoirVoici comment réaliser une popup d'information en pure CSS, sans Javascript. L'astuce est d'utiliser :hover de manière à utiliser des CSS différents au passage du curseur. Parmis les attributs CSS modifiés, on utilise display:none afin de...
Javascript - Les événements VoirQu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - Introduction au langage Javascript VoirQu'est-ce que le Javascript? Le Javascript est un langage de script incorporé dans un document HTML. Historiquement il s'agit même du premier langage de script pour le Web. Ce langage est un langage de programmation qui permet d'apporter des...

1

Sky34gl3, le 30 jui 2008 à 20:34:33

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

Répondre à Sky34gl3

2

ten62, le 30 jui 2008 à 20:36:10

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

Une idée ?

Répondre à ten62

3

Sky34gl3, le 30 jui 2008 à 20:48:33

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.

Répondre à Sky34gl3

4

ten62, le 30 jui 2008 à 20:50:29

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

Répondre à ten62

5

Sky34gl3, le 30 jui 2008 à 21:14:51

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?

Répondre à Sky34gl3

6

ten62, le 31 jui 2008 à 13:10:32

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 ?

Répondre à ten62

7

Sky34gl3, le 31 jui 2008 à 14:19:21

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

Répondre à Sky34gl3

8

nEm3sis, le 31 jui 2008 à 16:16:25

Je vais même le faire avant toi

<script>
	var nbDeLigne = 3;
	function fnct_textarea(p){
		var nb = 1;
		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;
				}
			}
		}
	}
</script>
<textarea cols=200 rows=50 onKeyup="fnct_textarea(this)"></textarea>

Répondre à nEm3sis

9

Sky34gl3, le 31 jui 2008 à 18:08:36

Merci ça m'arrange ^^.

Répondre à Sky34gl3

10

ten62, le 31 jui 2008 à 19:22:29

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

Répondre à ten62

11

Sky34gl3, le 31 jui 2008 à 23:31:04

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

Répondre à Sky34gl3

12

Sky34gl3, le 1 aoû 2008 à 00:08:12

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.

Répondre à Sky34gl3

13

nEm3sis, le 1 aoû 2008 à 00:14:29

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

Répondre à nEm3sis

14

Sky34gl3, le 1 aoû 2008 à 11:41:14

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.

Répondre à Sky34gl3

15

ten62, le 1 aoû 2008 à 15:23:54

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 !

Répondre à ten62

16

Sky34gl3, le 1 aoû 2008 à 16:14:28

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

Répondre à Sky34gl3

17

nEm3sis, le 1 aoû 2008 à 18:00:56

Toi aussi tu m'aide ^^
j'ai oublié de vérifier sur IE
j'ai fais la une autre version qui est "normalement" compatible avec firefox3 et IE7

<script>
	var nbDeLigne_ = 5;
	var nbCharParLigne_ = 5;
	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 = 1;
		var nbCharLigne = 0;
		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 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=5 rows=10 onKeyup="fnct_textarea(this)"></textarea>


autre chose a propos du retour a la ligne avec IE:
ce n'est pas un vrai retour a la ligne, seul l'affichage montre un retour a la ligne alors qu'il n'y en a pas (testez un ctrl a, ctrl c vous verrez que les saut de lignes ne sont pas là)

Répondre à nEm3sis

18

Sky34gl3, le 1 aoû 2008 à 18:09:21

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

Répondre à Sky34gl3

19

 ten62, le 6 aoû 2008 à 22:20:17

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

Répondre à ten62
Collection CommentÇaMarche.net