Exemples & Sources en JavaScript Annuaire francophone du CGI Exemples & Sources en JavaScript
Accueil du site

Détection (3)
Divers (10)
Formulaire (11)
Image (5)
Navigation (3)

Les 10 derniers
Les plus vus

Infos sur JavaScript
Les mots réservés
Les événements
Les opérateurs

Archives

A propos du site
Le Forum du site

Linker Scripts-fr !

Faîtes un lien sur votre site

 

Valid HTML 4.01!
Valid CSS!

Actuellement 1 connecté

Bienvenue sur Scripts-fr.com

Boite à texte agrandissable


Exemple :

Voici une boite à texte qui s'agrandit au fur et à mesure de la frappe

Quelque chose de plus de 5 caractères:

Explication du script : (a copier et à coller)

<html>
<head>
<title></title>

<script type="text/javascript">
<!-- Debut
// Original: Robert Khatchadourian (sonic890@hotmail.com)
// JavaScript pris sur le site: "http://www.java.scripts-fr.com"

function grandi(max_carac)
{
if( (document.form1.boite.value == null ) || (document.form1.boite.value == "" ) )
document.form1.boite.size = size;

/*
Nous commencons donc par ouvrir notre fonction
grandi qui reçoit une variable max_carac.
Une condition
if est ouverte pour vérifier si la valeur de notre champ existe avec null ou est vide avec "".
Pour se faire, on utilise la propriété
value de l'objet text (ici boite) du formulaire (form1). Vu que notre condition se porte sur deux expression on utilise l'opérateur logique OR (ou en français OU). Cet opérateur fonctionne comme suit :
Si l'une des deux expressions ou les deux ont la valeur true, la valeur du résultat est true. Si les deux expressions ont la valeur false, la valeur du résultat est false.
Lorsque les conditions sont remplies, la taille de notre boite à texte vaut
size (variable que nous verrons plus bas).
*/

if( (document.form1.boite.value.length >= size) && (document.form1.boite.value.length <= max_carac) )
document.form1.boite.size = document.form1.boite.value.length + 1;

/*
Arrive la seconde condition
if; celle ci vérifie si la valeur du champ texte boite est supérieure ou égale (=>) à notre variable size (plus bas je vous ai dit) et si cette même valeur est inférieure ou égale (<=) à la variable max_carac envoyée à la fonction.
Cette double condition se fait avec l'opérateur logique
&& (AND, en français ET). Elle fonctionne comme suit :
Si et seulement si les deux expressions ont la valeur true, la valeur du résultat est true. Si l'une des expressions a la valeur false, la valeur du résultat est false.
Si notre condition est remplie on ajoute 1 à la longueur de notre boite en utilisant la propriété
length de l'objet String (qui ici représente la valeur de notre boite à texte du formulaire de la page, document.form1.boite.value quoi...).
*/

else document.form1.boite.size = size; }

/*
Et si aucune des conditions n'est remplies, on donne la valeur de la variable
size à la taille de notre boite à texte
*/

// Fin --> </script>

</head>
<body>

<form name="form1" action="#">
<input type="text" name="boite" maxlength="30" size="5" onChange="setInterval('grandi(document.form1.boite.maxLength)', 1)">
</form>

<!--
Voici donc notre formulaire avec son champ texte, j'ai fixé ici 5 caractères visibles et 30 possibles au maximum.
Sur l'événement
onChange, on va utiliser la méthode setInterval de l'objet window; en fait cette méthode nous permet d'appeler notre fonction grandi, en lui envoyant la valeur maxLength (30, qui dans notre fonction correspond à max_car) toutes les 1 millisecondes.
-->

<script type="text/javascript">
<!--
var size = document.form1.boite.size;
// Et voici notre fameuse variable size qui vaut la taille de la boite
// -->
</script>

</body>
</html>


© 2002 Java.Scripts-fr - Tous droits réservés - Design altiline.com - Hébergement eBusiness.be
Pour tout commentaire, n'hésitez pas à contacter le webmaster

Contact !