Mon script de formulaires phpMyForm intègre désormais l'utilisation du plugin jQuery Masked Input Plugin.

Le site du plugin est actuellement indisponible.

Ce plugin permet la saisie d'informations dans un champ text en respectant un certain format.

Utilisé donc uniquement (et c'est logique quelque part) avec le champ type text, on dispose de 4 nouveaux attributs pour ce type de champ.

1. mask *
   Le masque du champ. Exemple : 99/99/9999 pour une date fr.
   • a : Caractères alphabétiques (A-Z a-z).
   • 9 : Caractères numériques(0-9).
   • * : Caractères alphanumérique (A-Z a-z 0-9).
     On peut définir des masques personnalisés. Voir mask_custom et mask_definitions.
2. mask_custom
   Une lettre (ou signe) qui représentera les caractères du masque personnalisé défini dans mask_definitions.
   Exemple : si on veut un champ de 3 caractères avec seulement les lettres a à e et les chiffres 1 à 5 on va définir les attributs comme ceci :
   • mask=xxx
   • mask_custom=x
   • mask_definitions=[a-e1-5]
   mask_custom ne va pas sans l'attibut mask_definition, si l'un des 2 attributs est absent, cela sera sans effet.
3. mask_definitions
   Masque personnalisé. On définit les caractères autorisés ou pas.
   Exemple : [A-F], le caractères rentré ne pourra être qu'une lettre de A à F majuscules.
4. mask_placeholder
   Ce qu'on veut voir s'afficher lorsque qu'il y a le focus sur le champ (C'est une aide à la saisie).
   Exemple : jj/mm/aaaa nous indique clairement qu'on doit taper une date de ce format (sans à avoir à taper les /).
   Le plugin ne vérifie pas, dans cet exemple, la validité de la date. Il faut gérer soi-même la vérification.

Voir le site du plugin

Un formulaire avec 3 exemples :

Pour info, le code javascript pour ce formulaire (généré automatiquement) :

<script>
  jQuery(document).ready(function($) {
    $("form#test_mask #mask01").mask("99/99/9999" ,{placeholder:"jj/mm/aaaa"});
    $.mask.definitions['h']="[A-Fa-f0-9]";
    $("form#test_mask #mask02").mask("#hhhhhh");
    $("form#test_mask #mask03").mask("a*-999-a999");
  });
</script>

Le fichier form_definition.ini de ce formulaire :

[mask01]
field_type=text
label=Mask #1
class=pmf-medium-text
mask="99/99/9999"
mask_placeholder="jj/mm/aaaa"
text_bottom="mask=99/99/9999<br />mask_placeholder=jj/mm/aaaa"

[mask02]
field_type=text
label=Mask #2
class=pmf-medium-text
mask="#hhhhhh"
mask_custom=h
mask_definitions="[A-Fa-f0-9]"
text_bottom="Format couleur HTML hexadécimal.<br />mask=#hhhhhh<br />mask_custom=h<br />mask_definition=[A-Fa-f0-9]"

[mask03]
field_type=text
label=Mask #3
class=pmf-medium-text
mask="a*-999-a999"
text_bottom="mask=a*-999-a999"

Documentation phpMyForm

Mis à jour le : 11/09/2018 14:27