Utilisez jQuery pour réaliser la méthode d'incrémentation et de décrémentation de la valeur d'entrée dans de nombreux sites Web de commerce électronique, lorsqu'il s'agit de la quantité de marchandises sur la page du panier, il sera fourni qu'un bouton + et un bouton - soient utilisés pour augmenter et diminuer de 1, et permettre uniquement la saisie de valeurs numériques dans l'entrée. À ce stade, jQuery est nécessaire pour implémenter <.>, et est accompagné de jQuerycode source~
Introduisez d'abord les fichiers css et js nécessaires.
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="css/jquery.bootstrap-touchspin.min.css" rel="stylesheet" /> <script src="Scripts/jquery-2.1.3.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="Scripts/jquery.bootstrap-touchspin.min.js"></script>
1. Contrôler la précision des valeurs numériques et l'incrémentation et la décrémentation automatiques
<br /> <div style="margin-left: 10px;"> <form class="form-horizontal" role="form"> <div class="form-group"> <div class="col-xs-2"> <input id="demo1" type="text" value="55" name="demo1" class="form-control" /> </div> </div> </form> </div> <script type="text/javascript"> $(function () { $("input[name='demo1']").TouchSpin({ min: 0, max: 100, step: 0.1,//增量或减量 decimals: 2, //精度 boostat: 5, maxboostedstep: 10, postfix: '%' //后缀 }); }); </script>
● Cliquez sur le bouton + pour incrémenter de 0,1 ● Cliquez sur le bouton - pour décrémenter de 0,1
● Conservez 2 décimales
● Le minimum autorisé la valeur est 0,00
● La valeur maximale autorisée est 100,00
● Seules les valeurs numériques sont autorisées, sinon le focus est perdu et la valeur minimale est affichée 0,00
2 . Seuls les entiers à partir de 1 sont autorisés, ceci C'est également une pratique courante sur la page du panier
<div style="margin-left: 10px;"> <form class="form-horizontal" role="form"> <div class="form-group"> <div class="col-xs-2"> <input id="demo2" type="text" value="1" name="demo2" class="form-control" /> </div> </div> </form> </div> <script type="text/javascript"> $(function () { $("input[name='demo2']").TouchSpin({ min: 1, max: 100, step: 1//增量或减量 }); }); </script>
cliquez sur . le bouton + pour l'augmenter de 1 ● Cliquez sur le bouton - pour le décrémenter de 1
● La valeur minimale autorisée est 1
● La valeur maximale autorisée est 100
● Uniquement les valeurs numériques sont autorisés, sinon le focus est perdu et la valeur minimale est affichée 1
Site Web PHP chinois~
Recommandations associées :
Comment utiliser jquery pour contrôler la sélection des cases à cocher, la sélection inverse et la désélection en un seul clic
Quelle est la différence entre JS et JQUERY
Comment utiliser jQuery pour obtenir un effet loupe
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!