L'Altruiste : Le Javascript

Text représente un élément de saisie textuel dans un formulaire.

Compatibilité

Disponibilité

Javascript 1.0 côté client

Correspondance HTML

<input type="text"...>

Héritage

Input et HTMLElement

Synopsis

form.elements[i] form.name

Propriétés

Propriété	Description
defaultValue	représente la valeur par défaut de l'élément.
form	spécifie le formulaire contenant l'élément de saisie.
name	correspond au nom de l'éléments de saisie (NAME).
type	correspond à l'attribut TYPE.
value	valeur de l'élément Input (VALUE).

Méthodes

Méthode	Description
blur	enlève le focus sur l'élément de saisie.
click	simule un clique de souris sur l'élément de saisie.
focus	donne le focus à l'élément de saisie.
handleEvent	invoque le Handler pour spécifier un événement.
select	sélectionne le texte dans l'élément de saisie.

Evénements

Evénement	Description
onBlur	perte de focus de l'élément de saisie.
onChange	la valeur de l'élément de saisie change.
onClick	clique de souris sur l'élément de saisie.
onFocus	réception de focus sur l'élément de saisie.

Exemple [voir]

<html>
  <head>
  <title>Démonstration de Text</title>
  <script language="JavaScript">
      function verif(form, bouton)
      {
        Retour = false;
        if (bouton.name == "1") Retour = verifSaisie1(form);
        if (bouton.name == "2") Retour = verifSaisie2(form);
        if (bouton.name == "3") Retour = verifSaisie3(form);
        if (bouton.name == "4") Retour = verifSaisie4(form);
        if (Retour)
          alert ("Saisie correcte!");
      }
      function verifSaisie1(form)
      {
        Ctrl = form.texte1;
        if (Ctrl.value == "" || Ctrl.value.indexOf ('@', 0) == -1)
        {
          validation (Ctrl, "Saisir une adresse email valide !")
          return (false);
        }
        else
          return (true);
      }
      function verifSaisie2(form)
      {
        Ctrl = form.texte2;
        if (Ctrl.value.length != 5)
        {
          validation (Ctrl, "Saisir 5 caractères maximum !")
          return (false);
        }
        else
          return (true);
      }
      function verifSaisie3(form)
      {
        Ctrl = form.texte3;
        if (Ctrl.value.length < 3)
        {
          validation (Ctrl, "Saisir au moins trois caractères !")
          return (false);
        }
        else
          return (true);
      }
      function verifSaisie4(form)
      {
        Ctrl = form.texte4;
        if (Ctrl.value == "")
        {
          validation (Ctrl, "Saisir un texte quelconque !")
          return (false);
        }
        else
          return (true);
      }
      function sousmission (form, bouton)
      {
        if (!verifSaisie1(form)) return;
        if (!verifSaisie2(form)) return;
        if (!verifSaisie3(form)) return;
        if (!verifSaisie4(form)) return;
        alert ("Toutes les saisies sont correctes !&nMerci...");
        return;
      }
      function validation(Ctrl, msg)
      {
        alert(msg)
        Ctrl.focus();
        return;
      }
    </script>
  </head>
  <body>
    <form name="form" method="get">
      <p>Saisir une adresse email (nom@serveur.suf): <br>
        <input type="text" name="texte1" size="20">
        <input type="button" name="1" value="Vérifier"
             onclick="verif(this.form, this)">
      </p>
      <p>Saisir 5 caractères au plus : <br>
        <input type="text" name="texte2" size="20">
        <input type="button" name="2" value="Vérifier" 
             onclick="verif(this.form, this)">
       </p>
      <p>Saisir au moins trois caractères : <br>
        <input type="text" name="texte3" size="20">
        <input type="button" name="3" value="Vérifier"
             onclick="verif(this.form, this)">
      </p>
      <p>Saisir un texte sans espaces : <br>
        <input type="text" name="texte4" size="20">
        <input type="button" name="4" value="Vérifier"
             onclick="verif(this.form, this)">
      </p>
      <p>
        <input type="button" name="Soumettre" value="Submit"
             onclick="sousmission(this.form, this)">
      </p>
    </form>
  </body>
</html>

En savoir plus :