CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2010 03 22 15:03:31

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Formulaire

> TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE

TEXTAREA : LIMITER LA LARGEUR ET LA HAUTEUR DU TEXTE SAISIE

Information sur la source

Note :

6,00 / 10

Catégorie :Formulaire Classé sous :formulaire, textarea, taille maximum, récursif, tableau Niveau :Débutant Date de création :16/02/2009 Date de mise à jour :25/02/2009 12:38:16 Vu / téléchargé :3 545 / 148

Auteur : vilfarfadet

Ecrire un message privé

Commentaire sur cette source (13)

Ajouter un commentaire et/ou une note

Description

La plupart des contrôles de saisie dans un champ textarea se limite à la longueur du texte.

L'intérêt de limiter la largeur et la hauteur peut être simplement cosmétique (je rappèle que l'attribut wrap est à proscrire) : pas de barre de défilement (sauf si vous avez joué avec la feuille de style :-) ).
Il peut aussi s'agir de fournir des données à un vieux programme (genre Cobol) qui veut absolument tant de lignes et tant de colonnes et qui ne plante pas proprement sinon.

Syntaxe :
- memoire(nom_du_textarea);
- texte_limite(nom_du_textarea, largeur_max, hauteur_max);

Le principe est simple :
1. À l'appui d'une touche, on mémorise le contenu actuel du champ. Si on a un copier/coller un peu gros, cela permettra de revenir en arrière.
2. Au relachement de la touche on regarde si le nombre de caractères ne dépasse pas la largeur x la hauteur. Si c'est la cas on arrête tout en pleurant.
3. On compte les lignes en trop. S'il y en a, on les regroupe au début.
4. On vérifie la longueur de chaque ligne une à une. Si ça dépasse, on coupe et on reporte à la ligne suivante.
5. S'il y a eu modification des lignes, on refait une passe (retour au point 2.)

Source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
<title>Ne pas dépasser 80 x 6</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function memoire(champ)
{
avant = champ.value;
}
function texte_limite(champ, largeur, hauteur)
{
probleme = false;
apres = champ.value;
lignes = apres.split(/[\n\r]/);
// trop de caractères ?
if (lignes.join('').length > (largeur-1)*hauteur) {
//alert('largeur x hauteur = '+largeur*hauteur+'\nnombre de lignes : '+lignes.length+'\nnombre de caractères : '+lignes.join('').length);
champ.value = avant; // marche arrière
alert('Texte trop long !');
} else {
entrop = lignes.length-hauteur;
// trop de lignes ?
if (entrop > 0) {
probleme = true;
//a=lignes[0];
detrop = lignes.splice(0,entrop);
//b=lignes[0];
lignes[0] = detrop.join(' ')+' '+lignes[0];
//alert(entrop+' ligne(s) en trop\nligne 1 avant : '+a+'\nligne 1 apres decalage : '+b+'\nnouvelle ligne 1 : '+lignes[0]);
}
// ligne(s) trop longue(s) ?
apartir = Math.min(lignes.length, hauteur);
for (i = 0 ; i < apartir ; i++)
{
entrop = lignes[i].length-largeur;
if (entrop > 0) {
probleme = true;
//a=lignes[i];
//c=lignes[i+1];
/*
coupure = lignes[i].lastIndexOf(' ');
if (coupure == -1) {
*/
//b=lignes[i].substr(largeur);
if (i+1 == apartir) {
lignes[i+1] = lignes[i].substr(largeur);
} else {
lignes[i+1] = lignes[i].substr(largeur)+' '+lignes[i+1];
}
lignes[i] = lignes[i].substr(0, largeur);
/*
} else {
//b=lignes[i].substr(coupure+1);
if (i+1 == apartir) {
lignes[i+1] = lignes[i].substr(coupure+1);
} else {
lignes[i+1] = lignes[i].substr(coupure+1)+' '+lignes[i+1];
}
lignes[i] = lignes[i].substr(0, coupure);
}
*/
//alert('largeur : '+largeur+' et coupure : '+coupure+'\n'+entrop+' caractère(s) en trop ligne '+(i+1)+'\nligne : '+a+'\npartie en trop : '+b+'\nligne suivante : '+c+'\nnouvelle ligne : '+lignes[i]+'\nnouvelle ligne suivante : '+lignes[i+1]);
}
}
if (probleme) {
champ.value = lignes.join('\n'); // concaténation
texte_limite(champ, largeur, hauteur); // nouvelle passe
}
}
}
</script>
</head>
<body>
<form id="test" method="post" action="#">
<textarea id="texte" name="texte" cols="80" rows="6" style="overflow: auto;" onkeypress="memoire(this);" onkeyup="texte_limite(this, 80, 6);"></textarea>
<br />
<input type="submit" value="Zou" />
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
	<title>Ne pas dépasser 80 x 6</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<script type="text/javascript">
function memoire(champ)
{
	avant = champ.value;
}

function texte_limite(champ, largeur, hauteur)
{
	probleme = false;
	apres = champ.value;
	lignes = apres.split(/[\n\r]/);
	// trop de caractères ?
	if (lignes.join('').length > (largeur-1)*hauteur) {
		//alert('largeur x hauteur = '+largeur*hauteur+'\nnombre de lignes : '+lignes.length+'\nnombre de caractères : '+lignes.join('').length);
		champ.value = avant; // marche arrière
		alert('Texte trop long !');
	} else {
		entrop = lignes.length-hauteur;
		// trop de lignes ?
		if (entrop > 0) {
			probleme = true;
			//a=lignes[0];
			detrop = lignes.splice(0,entrop);
			//b=lignes[0];
			lignes[0] = detrop.join(' ')+' '+lignes[0];
			//alert(entrop+' ligne(s) en trop\nligne 1 avant : '+a+'\nligne 1 apres decalage : '+b+'\nnouvelle ligne 1 : '+lignes[0]);
		}
		// ligne(s) trop longue(s) ?
		apartir = Math.min(lignes.length, hauteur);
		for (i = 0 ; i < apartir ; i++)
		{
			entrop = lignes[i].length-largeur;
			if (entrop > 0) {
				probleme = true;
				//a=lignes[i];
				//c=lignes[i+1];
				/*
				coupure = lignes[i].lastIndexOf(' ');
				if (coupure == -1) {
				*/
					//b=lignes[i].substr(largeur);
					if (i+1 == apartir) {
						lignes[i+1] = lignes[i].substr(largeur);
					} else {
						lignes[i+1] = lignes[i].substr(largeur)+' '+lignes[i+1];
					}
					lignes[i] = lignes[i].substr(0, largeur);
				/*
				} else {
					//b=lignes[i].substr(coupure+1);
					if (i+1 == apartir) {
						lignes[i+1] = lignes[i].substr(coupure+1);
					} else {
						lignes[i+1] = lignes[i].substr(coupure+1)+' '+lignes[i+1];
					}
					lignes[i] = lignes[i].substr(0, coupure);
				}
				*/
				//alert('largeur : '+largeur+' et coupure : '+coupure+'\n'+entrop+' caractère(s) en trop ligne '+(i+1)+'\nligne : '+a+'\npartie en trop : '+b+'\nligne suivante : '+c+'\nnouvelle ligne : '+lignes[i]+'\nnouvelle ligne suivante : '+lignes[i+1]);
			}
		}
		if (probleme) {
			champ.value = lignes.join('\n'); // concaténation
			texte_limite(champ, largeur, hauteur); // nouvelle passe
		}
	}
}
	</script>
</head>
<body>
<form id="test" method="post" action="#">
	<textarea id="texte" name="texte" cols="80" rows="6" style="overflow: auto;" onkeypress="memoire(this);" onkeyup="texte_limite(this, 80, 6);"></textarea>
	<br />
	<input type="submit" value="Zou" />
</form>
</body>
</html>

Conclusion

Parmi les modifications possibles (en option par exemple), on peut vouloir :
- Faire une double passe (de bas en haut puis de haut en bas) pour retailler les lignes au mieux,
- Faire du filtrage des espaces en double ou en début de ligne,
- Couper au dernier espace de la ligne pour éviter de tronquer les mots : elle est actuellement commentée (partie utilisant la variable coupure) car il est possible d'avoir une boucle infinie dans certains cas. Le test se fait sur le nombre de caractères mais avec une découpe par mots, il est parfois impossible d'arranger le texte pour qu'il tienne dans le nombre de lignes imparties.
- Ne contrôler que la taille des lignes (nombre de colonnes), à coupler avec l'option précédente dans ce cas.
- etc.

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

ControleTailleTextarea.html 2 666 octets

Télécharger le zip

Historique

19 février 2009 10:44:47 :: J'ai corrigé l'erreur concernant le 'undefined'. Il s'agissait en fait de la ligne suivante, lorsqu'elle n'existait pas encore (c'est-à-dire lignes[i+1] est undefined). J'ai donc ajouté un test (voir if (i+1 == apartir)) pour ne récupérer la ligne suivante que si elle existe ! J'en ai profité pour améliorer le source : il est maintenant récursif. Si la dernière ligne dépasse la largeur maximale, on refait une passe complète. Enfin, j'ai laissé des lignes en commentaire. Ce sont les variables a, b, c et la boite d'alerte : En les décommentant, les curieux pourront voir comment la fonction agit sur les lignes.
19 février 2009 16:06:41 :: J'ai été un peu vite en besogne : quelques petites corrections pour avoir un javascript stable.
25 février 2009 12:36:33 :: Version définitive et totalement stable.
25 février 2009 12:38:16 :: Version définitive et robuste.

Sources du même auteur

VÉRIFICATION DU NUMÉRO DE TVA INTRACOMMUNAUTAIRE D'UNE SOCIÉ...

ESTIMATION DU DEGRÉ DE CONFIANCE À ACCORDER À UN MOT DE PASS...

Toutes les sources de vilfarfadet

Sources de la même categorie

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath

IMPLEMENTATION DE RANDOM PERSONNALISÉ par ousous

IMPLEMENTATION DE HASHTABLE par ousous

JAVASCRIPT.UTIL.ITERATOR par ousous

PALETTE DE COULEURS par titnome

Toutes les sources de la catégorie Formulaire

Sources en rapport avec celle ci

DÉSACTIVER UN BOUTON SUBMIT APRÈS ENVOI DU FORMULAIRE par SoftDeath

PALETTE DE COULEURS par titnome

MOOTABLEAU par Miky76

BBCODE! par DomJ

SELECT AVEC PLUSIEURS COLONNES par tikaprod

Commentaires et avis

Commentaire de mickaelpfr le 16/02/2009 13:28:22

Juste une question , ( je n'ai pas recherché l'info sur le net ... )
est ce que cols , prend en compte le nombre de caractère ou s'adapte t-il a la taille / police définit ?

Commentaire de jdmcreator le 16/02/2009 14:37:27

Petite remarque

Après un certainn nombre de caractère mis dans une ligne, lorsqu'on tape sur CTRL + A pour surligner, il ajoute "undefined" au texte.

Commentaire de vilfarfadet le 17/02/2009 09:26:02

L'attribut 'cols' (obligatoire) correspond au nombre de caractères visiblent sur une ligne. Autrement dit, la largeur du 'textarea' en nombre de caractères. À condition bien sûr de ne pas dire autre chose avec la feuille de style.

Essayez par exemple en ajoutant "width: 100%;" ou "width: 10em;" dans l'attribut 'style' du 'textarea'. L'attribut 'cols' ne sert plus à rien dans ce cas...

Commentaire de vilfarfadet le 17/02/2009 09:32:08

C'est étrange cette histoire de "undefined", je n'arrive pas à la reproduire quelque soit la combinaison de touches utilisées.

Avez-vous modifié le source pour faire des essais ?

En effet, j'ai eu ce problème en cours de développement parce qu'un substr() coupait un caractère de plus que la ligne en contenait. Le javascript retourne "undefined" pour ce caractère inexistant.

Commentaire de vilfarfadet le 17/02/2009 09:42:34

Petites précisions :

* Dans mon exemple, les lignes sont limités à 80 caractères, mais j'enlève le caractère retour-charriot avant traitement des lignes (avec split()) et je le remet ensuite (avec join()), les lignes font donc 81 caractères.

* Cette source a été écrite pour du texte tapé au fur et à mesure. Elle gère malgré tout les copier/coller.

Mais elle n'est pas optimale pour des copier/coller de plusieurs lignes en milieu de texte. Il peut arriver que le texte dépasse temporairement du cadre, cela se règle tout seul si l'on se déplace dans le texte avec les touches fléchées par exemple.

Une source multipasse serait mieux mais plus complexe. Il faut bien vous laisser un peu de travail :-)

Commentaire de jdmcreator le 17/02/2009 14:06:41

J'ai mis le texte suivant dans mon textarea : gggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg

'^^

En utilisant Safari, lorsque l'on pèse sur CTRL+A, il ajoute undefined au texte. Pour Internet Explorer, c'est pire. J'ai tapé ce même texte en gardant la touche appuyé et lorsque je l'ai relâché, il a ajouté undefined.

Mais pas de problème pour CTRL+A pour IE ni de tenir la touche pour Safari ;)

En espérant que cela t'aidera ;)

JDMCreator

Commentaire de jdmcreator le 17/02/2009 14:11:41

Parlant du copier-coller, Safari comme IE me rajoute undefined en copiant et en collant le texte en haut (gggggggg...)

Cordialement,

JDMCreator

Commentaire de jdmcreator le 17/02/2009 14:15:40

'^^ C'est encore moi '^^ !

Dommage qu'on ne puisse pas éditer nos message :(...

Heum...

J'ai changé le "80" par "20" pour voir ce que cela me donnerait et, au saut de ligne automatique car trop de caractère, il me rajoute aussi undefined. O_O

Je ne comprends pas...

Faut-il aussi changé d'autre chose que l'appel de la fonction texte_limite() ?

merci,

JDMCreator

Commentaire de vilfarfadet le 17/02/2009 16:50:17

Ça y est, j'ai mon "undefined" ! Bon ben, j'ai une variable non affectée

Ce n'est pas systématique, cela dépend de ce que l'on tape. Ce n'est pas lié à un navigateur, mais j'ai un bug *horreur* qui m'a échappé. Je n'ai plus qu'à corriger et déposer une nouvelle source...

Commentaire de vilfarfadet le 19/02/2009 16:56:48

Il me reste un problème de boucle infini à résoudre, mais il faut se mettre dans des conditions particulières pour le déclencher.

Commentaire de jdmcreator le 26/02/2009 14:34:53

Je vois que tu as réussi à trouver l'erreur dans ton code, bravo !

A+

JDMCreator

Commentaire de victorcoasne le 02/03/2009 13:44:49

Et avec des attributs rows et cols ça passe pas ?
Vous me direz qu'il y a toujours moyen d'outre-passer, mais le Javascript c'est pareil.
La seule solution : faire une vérif en PHP (mais dans ce cas là on est pas sur le bon site)
Bonne prog,
@++

Commentaire de laservert le 12/07/2009 16:48:49 6/10

Bonjour,

Code intéressant. Dans le cas du copier/coller, j'ai essayé d'introduire aussi les fonctions dans onMouseDown et onMouseUp mais sans succès.
La saisie n'est pas gérée lors de l'appui prolongé sur une touche (tel: **************...) puisque le onKeyUp n'est détecté qu'en fin de saisie, dommage.

Cordialement.

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Formulaire avec tableau auto dimensionné selon la taille de la fenetre [ par julien71 ] Je dois faire un tableau qui se redimensionne selon la taille de la fenetre.Les données sont stockées dans un tableau qui contient des enregistrements Formulaire : Ajouter une ligne sans reload [ par coraziari ] Bonjour,Je réalise un formulaire de saisie de CV mais je galère un peu pour les expériences. En effet, pour ne pas "polluer" trop la page, j'ai mis un passage de tableau vers php [ par sapakus ] Voili voilà,Je souhaite envoyer le contenu d'une variable javascript à une page PHP. J'utilise pour ce faire la technique du champ cach valeurs de formulaire 'select' dynamique [ par DarkTiteuf ] Voila bonsoir j'ai le cas suivant : et je voudrais que lorsque je clique sur une valeur a gauche cela change le tableau de droite. La propriét& enregistrer formulaire dans cookie [ par chabichowed ] Bonjour,Le script ci dessous permet de memoriser dans un cookie les valeur d un formulaire. le truc c est qu il ne retient que les textfield.Je l ai e formulaire et TextArea [ par beku ] Bonjour à tous je voudrais savoir comment effacer le contenu d'un textarea quand on clicke sur un bouton radio ? En effet, textarea n'a pas d'attribut textarea [ par Tieum86 ] Bonjour,j'ai un petit problème de conception avec mon site web.Je suis novice en javascript (mon domaine est plutot le langage API siemens...) et je v Afficher un exemple dans un tableau en fonction d'un choix dans un formulaire [ par kilian67 ] Bonjour,Je souhaite que d'après les choix qu'un utilisateur fait dans un formulaire de mise en page (police, taille, couleur, etc...) un exemple s'aff controle formulaire + textarea [ par cowlili ] Bonjour,j'ai un problème: je n'arrive pas à faire un contrôle pour vérifier si les textarea de mon formulaire ne sont pas vide. J'ai essayé de la faço textarea et lecture/remplacement d'une ligne [ par rangdalf ] Bonjour,Dans ma page HTML, j'ai 2 boutons:Un qui ajoute dynamiquement des lignes à un tableau avec un texte saisie et un bouton supprimer.Un autre qui

Nos sponsors

Derniers Blogs

[WF4] PASSAGE D'ARGUMENTS LITERAL, VISUALBASICVALUE OU LAMBDAVALUE? par JeremyJeanson

[RIA SERVICES] INCLUDE ET DOMAINDATASOURCE par Audrey

ZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATION par ROMELARD Fabrice

PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE

APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit

Forum

RE : L'EVENEMENT ONCLICK DANS UN LIEN par Arto_8000

RE : BUG FIREFOX RECUPERATION DE LA TAILLE DE L'IMAGE par malkomad

L'EVENEMENT ONCLICK DANS UN LIEN par arabica10

RE : CRéATION DE SITE : RéCUPéRER DES SONS à PARTIR D'UN SITE SECONDAIRE. par nickadele

RE : PEUT'ON SAVOIR SI LIEN à ETE OUVERT OU PAS? par arabica10

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

FLASH pied page
Budget : 200€
creation bdd espace client
Budget : 1 200€
Integration Charte graphique prestashop
Budget : 400€

Logiciels

Academy System (10.9.4.0)
ACADEMY SYSTEM (10.9.4.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods