Formulaires text - Cours Javascript

Introduction

Info

Nous allons étudier les propriétés Javascript de la balise HTML et XHTML <input type="text">.
La balise HTML et XHTML text est un champ texte d'une seule ligne.

Vous trouverez d'autres informations pour compléter ce cours dans le chapitre :
- l'objet javascript Input
du Document Object Model HTML (DOM HTML)
- la balise HTML XHTML INPUT
- les feuilles de style CSS

input type=text

Balise HTML et XHTML

HTML :
Exemple de code :
<input type="text" name="nom" value="dmc">

XHTML :
Exemple de code :
<input type="text" id="nom" value="dmc" />

Changer la value

Vous pouvez changer la value de l'attribut HTML et XHTML "value" de la balise HTML et XHTML Input.

Par exemple :

Passez la souris sur le lien pour changer
Exemple de code :
<form name="f">
<input type="text" name="dmc">
<a href="#" onMouseOver = "document.forms.f.dmc.value = 'cmd'" onMouseOut = "document.forms.f.dmc.value = 'dmc'">Change</a>
</form>

Bloquer le champ

Vous pouvez bloquer l'écriture dans la balise HTML et XHTML Input.

Par exemple :
Exemple de code :
<form name="f">
<input type="text" name="dmc" onfocus = "document.forms.f.dmc.blur()"><br>essayez d'écrire dans le champ.</form>

Récupérer la valeur

Vous pouvez récupérer la valeur de la balise HTML et XHTML Input.

Par exemple tapez un mot dans la première case :
     Changer
Code :
Exemple de code :
<form name="f">
<input type="text" name="dmc" value="dmc"><input type="text" name="cmd" value=""><a href="javascript:void(0)" onClick = "document.forms.fff.cmd.value = document.forms.fff.dmc.value">Cliquez pour changer</a>
</form>

Les événements

onBlur Quand on perd le focus de la balise HTML et XHTML Input.
onChange Quand on fait un changement dans la balise HTML et XHTML Input (interprétée suivant le navigateur).
onFocus Quand prend le focus de la balise HTML et XHTML Input.
onSelect Quand on sélectionne du texte dans la balise HTML et XHTML Input (interprétée suivant le navigateur).
Exemple de code :
<input type="text" name="cmd" value="" onfocus="action()">

Les méthodes

blur() Enlève le focus de la balise HTML et XHTML Input.
focus() Met le focus de la balise HTML et XHTML Input.
select() Sélectionne le contenu de la balise HTML et XHTML Input.
handleEvent() Gestion des événements.
Exemple de code :
document.forms.formulaire.champtext.select();

Test nombre

Info

Imaginez que votre champ ne doit contenir que de chiffre (code postal).
  
Code :
Exemple de code :
<form name="e">

<input type="text" name="dmc" size="8">
<input type="button" name="bout" value="Tester" onClick="test()">

</form>

<script language="javascript">
function test() {
  var m=parseFloat(document.forms.e.dmc.value);
  if (isNaN(m)) {
    alert("C'est pas un chiffre.");
  }else {
  m=Number(document.forms.e.dmc.value);
  if (isNaN(m)) {
    alert("C'est pas un chiffre.");
  }else {
    alert("C'est un chiffre."); }}
  }
</script>

Test Mail

Info

Tester la validité d'un Email.
Code :
Exemple de code :
<form name="e">

<input type="text" name="dmc" size="8">
<input type="button" name="bout" value="Tester" onClick="test()">

</form>

<script language="javascript">
function test() {
  if ( (document.forms.ee.dmc.value !="") && (document.forms.ee.dmc.value.indexOf("@") !="-1") && (document.forms.ee.dmc.value.indexOf(".") !="-1")){
    alert("Email semble valide");
  }else {
    alert("Email semble invalide");
  }
}
</script>