Partage
  • Partager sur Facebook
  • Partager sur Twitter

changer chiffre

incrémenter ou baisser un chiffre

Sujet résolu
    14 décembre 2011 à 11:45:19

    bonjour,
    je ne sais pas trop comment faire cette requete sur un moteur de recherche. j'ai vu un truc sur un site qui me plait bien :
    il s'agit d'un curseur (mais pour faire plus simple, je pensais à un signe + et un signe -) qui permettent à l'internaute de changer une somme dans un champ de formulaire.

    ou trouver un tuto pour faire cela ? ou un script qui existerai à adapter ?
    • Partager sur Facebook
    • Partager sur Twitter
      14 décembre 2011 à 12:23:01

      T'es pas assez précis dans ta demande. Tu veux un input que un bouton + et - ? C'est très simple (tu dois connaître les bases du JS, cf. tutoriel).

      En HTML5 c'est par défaut.
      <input type="number" />
      
      • Partager sur Facebook
      • Partager sur Twitter
        14 décembre 2011 à 12:32:30

        tiens:
        <style>
        a, input{margin: 0px;padding: 0px;}
        a{text-decoration: none;display: block;}
        #plus, #moins{width: 30px;height: 30px;color: white;background: #36C;border: #24478F 1px solid;line-height: 15px;font-size: 18px;padding: 5px;padding-top: 10px;float: left;margin: 5px;text-align: center;}
        #champs{margin-left: 5px;width: 95px;height: 40px;font-size: 18px;text-align: center;}
        </style>
        
        
        <!-- Ce n'est que du style pour pas que ça soit moche  -->
        
        
        <!--
          Chacun d'entre ces deux liens doivent spécifier le signe
          de l'opération à retourner quand on clique dessus.
        -->
        <a id="plus" href="#" onclick="auClic('+')">+</a>
        <a id="moins" href="#" onclick="auClic('-')">-</a>
        
        
        <br style="clear: both"/>
        
        
        <!--
          notre champs de texte c'est lui
        -->
        <input type="text" id="champs" />
        
        
        <script type="text/javascript">
        
        /*
          bon on initialise par zero, au cas ou l'utilisateur n'a
          rien mi lors du premier calcule
        */
        var valeur = 0;
        
        
        
        /*
        
          avant d'incrémenter ou de décrémenter il faut d'abord
          vérifier le champ et voir si c'est faisable.
        
          si le champs est vide on remplace le nombre à calculer
          par zéro.
        
          si le champs contient une valeur non numérique on remplace
          le nombre à calculer par zéro.
        
        */
        
        function verifierChamps(){
        
          var chaine = document.getElementById("champs").value;
        
          if(chaine === "" || isNaN(chaine))
            chaine = "0";
        
          var nouvelleValeur = parseInt(chaine);
        
          if(nouvelleValeur !== valeur && chaine !== ""){
            valeur = nouvelleValeur;
          }
        
        }
        function auClic(signe){
        
          switch(signe){
            case "+":
              verifierChamps();
              document.getElementById("champs").value = (valeur + 1);
              break;
            case "-":
              verifierChamps();
              document.getElementById("champs").value = (valeur - 1);
              break;
          }
        }
        
        </script>
        
        • Partager sur Facebook
        • Partager sur Twitter
          15 décembre 2011 à 11:15:06

          merci A_T_J; c'est exactement ce que je voulais. je vais personnaliser cela un peu
          • Partager sur Facebook
          • Partager sur Twitter

          changer chiffre

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur
          • Markdown