Utilisation de Masked Input Plugin dans phpMyForm

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.
    • : Caractères alphabétiques (A-Z a-z).
    • : 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 :

mask=99/99/9999
mask_placeholder=jj/mm/aaaa

Format couleur HTML hexadécimal :
mask=#hhhhhh
mask_custom=h
mask_definition=[A-Fa-f0-9]

mask=a*-999-a999

 

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Sélection smileys

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.