Hello, world!

Voici un exemple de test illustrant l’utilisation du plugin `CodeInputBuilder` avec Bootstrap et jQuery. Cet exemple propose des champs configurés pour accepter des entiers, des nombres flottants et du texte, offrant un aperçu des possibilités de personnalisation du plugin.

1. Saisissez une valeur entière avec le type Integer

{ type: 'integer',
numInputs: 5,
values: [0x00, 0x02, 1, 0, 4],
minValues: [9, 9, 9, 9, 9],
maxValues: [9, 8, 7, 6, 5],
allowSign: true, // Nouveau paramètre pour autoriser le signe
defaultSign: '+', // Signe par défaut (peut être "+" ou "-")
gap: '1px', // Espace entre les inputs
requireKeyForScroll: 'Control',
allowArrowKeys: true,
}

Valeur de l'input modifié (Integer) :

Aucun changement

Valeur complète (Integer) :

Aucune valeur

2. Entrez une valeur décimale avec le type Float

{ type: 'float',
numInputs: 5,
values: [0, 0, 0, 0, 0],
minValues: [0, 0, 0, 0,0],
maxValues: [9, 9, 9, 9, 9],
decimalPosition : 2,
separator : ','
, gap: '1px', // Espace entre les inputs
autoFocusNextInput: true,
autoFocusNextInputDirection: 'Right',
isDisabled : true,
}

Valeur de l'input modifié (Float) :

Aucun changement

Valeur complète (Float) :

Aucune valeur

3. Entrez une latitude avec le type Float

{ type: 'float',
numInputs: 6,
values: [0, 0, 0, 0, 0, 0],
minValues: [0, 0, 0, 0, 0, 0],
maxValues: [9, 9, 9, 9, 9, 9],
decimalPosition : 2,
allowSign: true,
defaultSign: '+',
totalMin: -90.0,
totalMax: +90.0,
separator : '.'
, gap: '10px', // Espace entre les inputs
}

Valeur de l'input modifié (Latitude) :

Aucun changement

Valeur complète (Latitude) :

Aucune valeur

4. Entrez une longitude avec le type Float

{ type: 'float',
numInputs: 7,
values: [0, 0, 0, 0, 0, 0, 0],
minValues: [0, 0, 0, 0, 0, 0, 0],
maxValues: [9, 9, 9, 9, 9, 9, 9],
decimalPosition : 3,
allowSign: true,
defaultSign: '+',
totalMin: -180.0,
totalMax: +180.0,
separator : '.'
, gap: '10px', // Espace entre les inputs
}

Valeur de l'input modifié (Longitude) :

Aucun changement

Valeur complète (Longitude) :

Aucune valeur

5. Saisissez une valeur entière avec le type Hexadecimal

{ type: 'hexadecimal',
numInputs: 5,
values: [0x1d, 0x02, 9, '0xc', 'b'],
minValues: [0x00, 0x00, 0x00, 0x00, 0x00],
maxValues: [0x0f, 0x0f, 0x0f, 0x0f, 0x0f],
}

Valeur de l'input modifié (Hexadecimal) :

Aucun changement

Valeur complète (Hexadecimal) :

Aucune valeur

6. Saisissez une valeur entière avec le type Binary

{ type: 'binary',
numInputs: 5,
values: [0x00, 0x01, 0x00, 0x01, 0x00],
}

Valeur de l'input modifié (Binary) :

Aucun changement

Valeur complète (Binary) :

Aucune valeur

7. Saisissez un caractère avec le type Letter

{ type: 'letter',
numInputs: 5,
values: [0x00, 0xcd, 14, '0', 'µ'],
minValues: [0x00, 0x00, 0x00, 0x00, 0x00],
maxValues: [0xff, 0xff, 0xff, 0xff, 0xff],
}

Masquer l'affichage des entrées comme un mot de passe :


Valeur de l'input modifié (Letter) :

Aucun changement

Valeur complète (Letter) :

Aucune valeur

8. Sélectionnez un texte dans le champ de type Text

{ type: 'text',
values: ["Lorem", "Consectetur", "Eiusmod", "Nulla", "Vestibulum", "Sollicitudin"],
defaultValue : 0,
gap: '10px', // Espace entre les inputs
}

Valeur de l'input modifié (Text) :

Aucun changement

Valeur complète (Text) :

Aucune valeur

9a. Sélectionnez une heure avec le champ de type Time ( format 24 heures )

{ type: 'time',
formatTime: 'HH:MM:SS.SSS',
hourCycle: '24h',
defaultValue : 0,
gap: '10px', // Espace entre les inputs
}

Valeur de l'input modifié (Time) :

Aucun changement

Valeur complète (Time) :

Aucune valeur

9b. Sélectionnez une heure avec le champ de type Time ( format 12 heures )

{ type: 'time',
formatTime: 'HH:MM:SS',
hourCycle: '12h',
defaultValue : 0,
gap: '10px', // Espace entre les inputs
}

Valeur de l'input modifié (Time) :

Aucun changement

Valeur complète (Time) :

Aucune valeur

10a. Sélectionnez une date avec le champ de type Date

{ type: 'date',
formatDate: 'DD/MM/YYYY',
defaultValue : 0,
gap: '10px', // Espace entre les inputs
}

Valeur de l'input modifié (Date) :

Aucun changement

Valeur complète (Date) :

Aucune valeur

10b. Sélectionnez une date avec le champ de type Date (mois en lettre)

{ type: 'date',
formatDate: 'DD/MH/YYYY',
defaultLanguage : 'en-US',
defaultValue : 0,
gap: '10px', // Espace entre les inputs
}

Valeur de l'input modifié (Date) :

Aucun changement

Valeur complète (Date) :

Aucune valeur