Comment utiliser un composant d'interface utilisateur NumericTextBox jQuery dans votre application

Lorsque vous souhaitez contrôler le mode de saisie numérique d'un utilisateur, vous devez utiliser une zone de texte numérique. Kendo UI facilite le contrôle précis des entrées que vous autoriserez, ainsi que de l'aspect détaillé.

Dans l'épisode précédent vous avez appris comment se comportait le MaskedTextBox . utilisé pour formater la saisie de l'utilisateur. Dans cet épisode, vous apprendrez comment le NumericTextBox est utilisé pour formater une entrée numérique.

Le NumericTextBox est un champ de formulaire qui limite l'entrée aux nombres et possède un bouton pour incrémenter et décrémenter ses valeurs. Le but de ce composant est de mieux contrôler le formatage des données afin d’améliorer la précision. Par exemple, les monnaies sont libellées dans différentes dénominations, ce qui a une incidence sur le nombre de chiffres significatifs que l’entrée doit comporter et sur la manière de procéder. À venir, vous verrez une comparaison du type de saisie de numéro HTML et de l'interface utilisateur de Kendo de NumericTextBox .

de saisie de numéro de HTML

. Pour créer une zone de texte numérique en utilisant du HTML simple, vous créez un élément d’entrée et définissez l’attribut de type sur nombre . Par défaut, l'entrée incrémente et décrémente les valeurs d'une unité. Si un nombre autre qu'un nombre entier est entré, les valeurs seront arrondies au nombre entier le plus proche. Vous pouvez restreindre davantage l'entrée en ajoutant des attributs à l'élément. L'attribut max définit la valeur maximale du champ. L'attribut min définit la valeur minimale du champ. Et l'attribut step définit les intervalles d'augmentation et de diminution. L'exemple suivant accepte des nombres compris entre 0 et 100 et augmentera et diminuera les valeurs de 10.

L'étape affecte également le mode de calcul de l'arrondi et le nombre Par exemple, si vous utilisez un pas de .1, l’entrée entrée sera arrondie au dixième le plus proche, si vous utilisez un pas de .01, l’entrée sera arrondie au centième le plus proche. Si vous souhaitez que le champ de saisie accepte les dollars américains, vous pouvez autoriser l’utilisateur à entrer un nombre comportant jusqu’à deux décimales. l'étape d'être un dollar car il n’est pas utile que l’intervalle soit de un cent. Pour ce niveau de contrôle, nous avons besoin de la NumericTextBox .

Kendo UI NumericTextBox

En utilisant le même code d'en haut, nous pouvons transformer notre champ d'entrée en un Kendo UI NumericTextBox avec les éléments suivants: